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

■マーカーのイベントで情報ウインドウを表示

マップ上にマーカーを表示し、そのマーカーをクリックした時に情報ウインドウを表示します。
以下の例は、マーカーのクリックイベントの関数を登録する前で、情報ウインドウを生成しておき、クリックイベントの関数の中でその情報ウインドウを表示する様にしています。
<head> <title>Google Map API v3-5</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> 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の生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを生成 var gmarker = new google.maps.Marker({ map: gmap, position: latlng, title: "福井駅" }); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: "InfoWindow - test", maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(gmap, gmarker); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>

■複数のマーカーイベントで情報ウインドウを表示

「使い方その３（マーカーの表示）」で複数のマーカーを表示しましたが、それを拡張してそれぞれのマーカーでクリックしたときにそれぞれのマーカーの内容を表示する例を示します。
<head> <title>Google Map API v3-5</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> // GoogleMapオブジェクトの変数宣言 var gmap; 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の生成 gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // ５個のマーカー(座標に特に意味は無い) var markerData = [ { lat:"36.065487", lng:"136.230723", title:"marker-1" }, { lat:"36.067258", lng:"136.220604", title:"marker-2" }, { lat:"36.063794", lng:"136.220264", title:"marker-3" }, { lat:"36.062456", lng:"136.230704", title:"marker-4" }, { lat:"36.061456", lng:"136.220904", title:"marker-5" } ]; for (i = 0;i < markerData.length;i++) { // マーカーを生成 var marker = new google.maps.Marker({ map: gmap, position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng), title: markerData[i].title }); // 情報ウインドウの生成とクリックイベント関数の登録処理 setMarkerListener(marker, markerData[i].title); } } // 情報ウインドウの生成とクリックイベント関数の登録処理 function setMarkerListener(marker, title) { // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: title, maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(marker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(gmap, marker); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 400px; height: 400px;"></div> </body> </html>

最初の例で説明しましたイベントの処理とは、少し変わった部分があります。先ず、GoogleMapオブジェクトの変数宣言を関数の外に置いた点です。これは、gmap を別の関数からも参照しているため、グローバルな変数として宣言しました。

また、情報ウインドウの生成とクリックイベント関数の登録処理をひとつの関数として独立させてあります。これは、この関数の中で生成される情報ウインドウのインスタンスがそれぞれのマーカー毎に別々のものになる様にしています。

このソースを作成する前に失敗したものがありますので、以下の例をご覧ください。各マーカーは表示されますが、クリックしても5番目のマーカーのところにしか情報ウインドウは表示されません。

クリックイベントの関数のinfoWindowはforループ内の変数であるため、同じ変数が割り当てられてクリックイベント時にはforループ処理の最後の5番目のマーカーの情報ウインドウが残ったままになっています。それで、どのマーカーをクリックしても情報ウインドウには「marker-5」としか表示されません。

<head> <title>Google Map API v3-5</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> // GoogleMapオブジェクトの変数宣言 var gmap; 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の生成 gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // ５個のマーカー(座標に特に意味は無い) var markerData = [ { lat:"36.065487", lng:"136.230723", title:"marker-1" }, { lat:"36.067258", lng:"136.220604", title:"marker-2" }, { lat:"36.063794", lng:"136.220264", title:"marker-3" }, { lat:"36.062456", lng:"136.230704", title:"marker-4" }, { lat:"36.061456", lng:"136.220904", title:"marker-5" } ]; for (i = 0;i < markerData.length;i++) { // マーカーを生成 var marker = new google.maps.Marker({ map: gmap, position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng), title: markerData[i].title }); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: markerData[i].title, maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(marker, 'click', function(event) { alert("marker:"+this.getTitle()); // 情報ウィンドウの表示 infoWindow.open(gmap, marker); }); } } </script> </head> <body onload="initialize()"> <div id="map" style="width: 400px; height: 400px;"></div> </body> </html>

おやじプログラマー日記

コンピュータ業界に身をおいて３０年あまり…VB.NET・OracleなどのTIPS、おやじの独り言

おすすめ本

最近の記事

最近のトラックバック

Ranking

最近のコメント

アーカイブ

AccRanking

Ad

2011年5月27日 (金)

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

トラックバック

コメント

コメントを投稿

検索

admax

カテゴリ

リンク

LSF

LPOP