Google MAPS API V3 の google.maps.Marker で、表示している画像を変更させるサンプルプログラム。下の例では、クリックするたびに○と×が交互に表示されます。画像を表示させるだけの場合は、google.maps.Markerとして好きな画像を表示させるのページを。
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js"></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
});
// ○の画像
var img_o = new google.maps.MarkerImage(
'o.png',
new google.maps.Size(31,31),
new google.maps.Point(0,0),
new google.maps.Point(16,16)
);
// ×の画像
var img_x = new google.maps.MarkerImage(
'x.png',
new google.maps.Size(31,31),
new google.maps.Point(0,0),
new google.maps.Point(16,16)
);
// マーカー
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.710139, 139.810833),
map: map,
icon: img_o // はじめは ○
});
// マーカーでクリックイベントをListen
google.maps.event.addListener(marker, 'click', function(event) {
if (myCompare(marker.getIcon(), img_o)) {
// ○なら×を
marker.setIcon(img_x);
} else if (myCompare(marker.getIcon(), img_x) {
// ×なら○を
marker.setIcon(img_o);
} else {
// え？
alert('Oh, my God!');
}
});
//オブジェクトの比較
function myCompare(a, b) {
return (JSON.stringify(a) === JSON.stringify(b)) ? true : false;
}
</script>MarkerImageはコンストラクタ以外にオプション類を設定する術がないので、切り替えたい場合などは複数のMarkerImageを用意しておくか、毎回作ってやる必要があります。
デフォルトのマーカーにしたいときは、nullを与えてやれば良いようです。
marker.setIcon(null);