自作のマーカーも使える。変数を変えれば数種類のマーカーを使い分けることが出来る。
window.onload = function() { if (GBrowserIsCompatible()) { var map = new GMap(document.getElementById("map")); var icon = new GIcon(); icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); var point =new GPoint(-122.1419, 37.4419); var marker = new GMarker(point,icon); map.centerAndZoom(point, 4); map.addOverlay(marker); GEvent.addListener(marker, 'click', function() { var html = "<strong>Hello!</strong>"; marker.openInfoWindow(html); }); } }
<div id="map"><!--GoogleMap--></div>
前で解説している部分は省略。
var icon = new GIcon();
アイコン(オブジェクト)を作成する。
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
マーカーの画像があるURL。
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
影の画像があるURL。
icon.iconSize = new GSize(12, 20);
マーカー画像のサイズを設定。横x縦
icon.shadowSize = new GSize(22, 20);
影画像のサイズを設定。横x縦
icon.iconAnchor = new GPoint(6, 20);
アイコンの表示基準点を設定。
icon.infoWindowAnchor = new GPoint(5, 1);
情報ウィンドウの表示基準点を設定。
var marker = new GMarker(point,icon);
マーカーを作成する際に、使うアイコンを指定する。
影はアルファチャンネルのあるpngにしないと透過されない。