Google Maps APIを利用して表示するGoogleマップで、オリジナル画像を地図に重ねて表示します。マーカーは地図を拡大・縮小しても同じ大きさですが、重ねたオリジナル画像は地図の拡大・縮小に対応します。
html、css、Googleマップにオリジナルの画像を重ねて表示する以外のjavascriptは下記の記事と同様です。
javascriptのコードです。
まず、オリジナル画像は範囲を指定して表示するため、南西の緯度・経度と北東の緯度・経度を指定したLatLngBoundsクラスのオブジェクトを作成します。
次に、GroundOverlayクラスのオブジェクトを作成し、表示する画像のパスと表示する範囲の座標であるLatLngBoundsクラスのオブジェクトを指定します。そしてオプションのmapプロパティで表示する地図を指定します。
function initMap() {
var latlng = new google.maps.LatLng(35.6843218, 139.70311200000003); //中心の緯度, 経度
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 17,
center: latlng
});
var sw = new google.maps.LatLng(35.684206, 139.702751); //左下（南西）
var ne = new google.maps.LatLng(35.684676, 139.703360); //右上（北東）
var latlngImg = new google.maps.LatLngBounds(
sw,ne
);
var groundOverlay = new google.maps.GroundOverlay(
'icon.svg',
latlngImg, //オリジナル画像をを表示する範囲の座標
{map: map} //オリジナル画像をを表示する地図
);
}