既にGoogle Maps V3が一般的になっているが、V2で作られているサイトに修正が必要となり、複数のマーカーを一度に表示する必要があったり、オリジナルのアイコン・画像を使ったマーカーにしなくてはならないこともあるだろう。
V3であれば、サンプルも多く覚えるメリットもあるが、今更V2を復習するのは苦痛なはず。
ということで、そのまま使えるサンプルを以下に掲載する。
必須条件としてはmapキーは既に取得済であること。
サンプルでは、二カ所のマーカー(吹き出しも可能)、マップセンターに別色のオリジナルマーカー(吹き出しも可能)となっている。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <script src="https://maps.google.com/maps?file=api&v=2&key=[取得済のマップキー]" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load(){ if(GBrowserIsCompatible()){ var map = new GMap2(document.getElementById("map"), {size:new GSize(445,445)}); map.setCenter(new GLatLng(35.689488,139.691706), 10); var icon = new GIcon(); icon.image = "http://maps.google.co.jp/mapfiles/ms/icons/green-dot.png"; icon.iconSize = new GSize(32,32); icon.iconAnchor = new GPoint(16,32); icon.infoWindowAnchor = new GPoint(16,0); var marker = new GMarker(new GLatLng(35.689488,139.691706),icon); map.addOverlay(marker); GEvent.addListener(marker,'click', function(){ var point = marker.getPoint(); var msg = "緯度"+point.lat()+"<br />経度"+point.lng()+"<br />" marker.openInfoWindowHtml(msg); }); addMakers(35.643551,139.860315,"<a href='#'>葛西臨海公園</a>"); addMakers(35.715911,139.897929,"<a href='#'>篠崎公園</a>"); } map.addControl(new GSmallMapControl()); function addMakers(lat,lng,text){ var mk = new GMarker(new GLatLng(lat,lng)); map.addOverlay(mk); GEvent.addListener(mk,"click",showInfoWindow); function showInfoWindow(){ mk.openInfoWindowHtml(text); } } } //]]> </script> </head> <body onload="load()" onunload="GUnload();"> <div id="map"></div> </body> </html>