おやじプログラマー日記: 「GoogleMap API V3」の使い方その６（続々イベント）

2011年5月27日 (金)

「GoogleMap API V3」の使い方その６（続々イベント）

■マップのイベントとマーカーのイベントの複合的な使い方

マップ上でクリックした位置にマーカーを表示し、さらにそのマーカーをクリックした時にマーカーの緯度経度の値を情報ウインドウに表示します。

この例は、Googleのサンプルとして乗っているものを変更したものです。
マップ上でのクリックイベント時の関数を設定し、その中でマーカーを生成し、さらに情報ウインドウの表示を行うように、マーカーのクリックイベント時の関数を設定しています。

また、マーカーを生成した時に、そのマーカーをグローバル変数の配列に保存し、その配列のマーカーを使って、再表示、クリア、削除処理を行っています。 <head> <title>Google Map API v3-6</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var map; // GoogleMapオブジェクトの変数宣言 var markers = []; // マーカー保存配列 function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); // マップのクリックイベントの関数登録 google.maps.event.addListener(map, 'click', function(event) { // マップ上の位置でマーカーを生成 addMarker(event.latLng); }); } // マーカーの生成関数 function addMarker(location) { // マーカーを生成 marker = new google.maps.Marker({ position: location, map: map }); // 情報ウインドウの生成とクリックイベント関数の登録処理 setMarkerListener(marker, location); // 生成されたマーカーを保存 markers.push(marker); } // 情報ウインドウの生成とクリックイベント関数の登録処理 function setMarkerListener(marker, location) { // 表示文字列の生成(緯度・経度) var contentString = "lat:" + location.lat() + "<br>" + "lng:" + location.lng(); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(marker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(map, marker); }); } // マップからマーカーの画像を消す(保存されたマーカーはそのまま) function clearMarkers() { if (markers) { for (i in markers) { markers[i].setMap(null); } } } // 保存されたマーカーをマップ上に表示 function showMarkers() { if (markers) { for (i in markers) { markers[i].setMap(map); } } } // マップからマーカーの画像を消し、マーカーも削除 function deleteMarkers() { if (markers) { clearMarkers(); markers.length = 0; } } </script> </head> <body onload="initialize();"> マップ上をクリックするとマーカーを表示します。<br> さらにそのマーカーをクリックすると緯度経度をウインドウに表示します。 <div> <input onclick="clearMarkers();" type=button value="マーカー消去"/> <input onclick="showMarkers();" type=button value="マーカー表示"/> <input onclick="deleteMarkers();" type=button value="マーカー削除"/> </div> <div id="map" style="width: 400px; height: 300px;"></div> </body> </html>
マップ上をクリックするとマーカーを表示します。
さらにそのマーカーをクリックすると緯度経度をウインドウに表示します。