Google MAPS API V3 の google.maps.Marker で、既定のアイコンを使わずに独自の画像を表示させるサンプルプログラム。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 400px; height: 280px;"></div>
<script type="text/javascript">
// 地図
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: new google.maps.LatLng(35.710139, 139.810833),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// マーカー
new google.maps.Marker({
position: new google.maps.LatLng(35.710139, 139.810833),
map: map,
icon: "v.png"
});
</script>Markerのコンストラクタのiconオプションで、画像ファイルのURLを与えてやると、デフォルトのマーカーの代わりに表示してくれます。画像が表示される位置は、画像の下部中央がpositionで指定した座標に乗って表示されます。
それではうれしくない場合には、MarkerImageクラスを使って指示してやります。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 400px; height: 280px;"></div>
<script type="text/javascript">
// 地図
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: new google.maps.LatLng(35.710139, 139.810833),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// マーカー
new google.maps.Marker({
position: new google.maps.LatLng(35.710139, 139.810833),
map: map,
icon: new google.maps.MarkerImage(
'x.png', // url
new google.maps.Size(31,31), // size
new google.maps.Point(0,0), // origin
new google.maps.Point(16,16) // anchor
)
});
</script>google.maps.MarkerImage()コンストラクタの引数は、
- url
- 画像のURL（String）
- size (省略可)
- 表示させる画像のサイズ (google.maps.Size)
- origin (省略可)
- 画像データの中で、どの部分を起点として表示させるか (google.maps.Point)
- anchor (省略可)
- マーカーのpositionで与えられる緯度経度を画像のどの点にするか (google.maps.Point)。省略時は中央下部。これだけを指定する場合でもsizeやoriginも省略できません。