Google Maps API V3 マーカーのカスタマイズ

Google Maps API V3でマーカーを表示させてみましょう。

基本的にはヘッダのとbodyタグ内にonloadでコールして、DOMで指定したID属性タグ内にMAPが表示されるようにします。

JavaScriptの記述が以下のようになります。

まずは通常のGooglemaps APIの記述。

var marker = new google.maps.LatLng(緯度,経度);
var parliament = new google.maps.LatLng(緯度,経度);
var marker;
var map;

function initialize() {
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: marker
};

map = new google.maps.Map(document.getElementById(“map_canvas”),
mapOptions);

//ここからがマーカーの記述

marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: parliament
});
google.maps.event.addListener(marker, ‘click’, toggleBounce);
}

function toggleBounce() {

if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}