Google Maps APIを利用して表示するGoogleマップで、オリジナル画像で設定したマーカーのサイズを縮小し、表示位置を通常よりも25pxだけ上に移動します。
html、css、Googleマップのマーカーのサイズと表示位置調整以外のjavascriptは下記の記事と同様です。
javascriptのコードです。
Markerクラスのオブジェクトのiconプロパティでマーカーのサイズと表示位置を調整します。
マーカーのオリジナル画像のサイズは65px × 65pxですが、ここではscaledSizeで40px × 40pxに縮小します。次に表示位置ですが、40px × 40pxの画像の場合、画像の左上を起点として画像の下中央である(20, 40)がデフォルトの表示位置になります。今回は25pxだけ上に移動したいため、Y座標に25pxプラスした(20, 65)をanchorに指定します。
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 marker = new google.maps.Marker({
position: latlng,
map: map,
icon: {
url: 'icon_blue.png',
scaledSize: new google.maps.Size(40, 40), //マーカーのサイズを縮小
anchor: new google.maps.Point(20, 65) //マーカーの表示位置を25pxだけ上に
}
});
}