Google MapsTMで遊んでみよう！

最終更新日 2007/11/10

【地図上にランダムにマーカーを表示する】
　地図上にランダムにマーカーを表示させます。マーカーをクリックするとその割り当て番号をInfoWindow内に表示します。
ブラウザで「ソースの表示」を行うとこの見本のJAVAScriptを読むことができます。
　　

 
  
【説明】
　関数createMarkerは指定された座標pointに新しいマーカーを作成する関数です。作成の際に、クリック・イベントが発生した場合にGEvent.addListenerによってInfoWindowを開く性質が加えられています。

 //<![CDATA[

function load() {
　　if (GBrowserIsCompatible()) {
　　　var map = new GMap2(document.getElementById("map"));
　　　map.addControl(new GLargeMapControl());
　　　map.addControl(new GMapTypeControl());
　　　map.addControl(new GScaleControl());
　　　map.setCenter(new GLatLng(34.94097,135.765953), 13);
　　　function createMarker(point, number) {
　　　　var marker = new GMarker(point);
　　　　GEvent.addListener(marker, "click", function() {
　　　　　marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
　　　　});
　　　　return marker;
　　　}
　　　var bounds = map.getBounds();
　　　var southWest = bounds.getSouthWest();
　　　var northEast = bounds.getNorthEast();
　　　var lngSpan = northEast.lng() - southWest.lng();
　　　var latSpan = northEast.lat() - southWest.lat();
　　　for (var i = 0; i < 25; i++) {
　　　　var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
　　　　map.addOverlay(createMarker(point, i + 1));
　　　}
　　}
　}
//]]>
 		  



 

マウスで地図上をクリックするとGoogle地図上の座標を抽出することができます。
ブラウザで「ソースの表示」を行うとJAVAScriptを読むことができます。