おやじプログラマー日記: GoogleMap API

「GoogleMap API V3」の使い方その11（さらにInfowindow）

■Infowindowの大きさ設定

以前の記事の中でInfowindowを使って単なる文字列の表示を行ったことがありましたが、このブログをご覧の方で、「リンクが貼れればいいのに」との感想がどこかにありました。そこで、今回はそのリンクと併せて、Infowindowの大きさ設定のことについて記事を書きます。

Infowindowにはオプションとして指定できる大きさの引数としてはmaxWidthしかなく、高さ指定がありません。 Infowindowに表示する内容としてのcontentに縦に長いものを渡すと縦方向は適当に内部で処理してくれているようです。以下にその例を示します。（尚、縦に長すぎてmapの縦に収まらない場合はスクロールバーが表示されます）
<head> <title>Google Map API v3-11</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<br />" + "<a href='http://www.google.co.jp/'>google検索</a><br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" , 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: 400px;"></div> </body> </html>

■DIVタグによるInfowindowの大きさ設定

Infowindowのcontentの内容をDIVタグを使って囲み、DIVのCSS宣言でwidthとheightを設定すれば表示ウインドウの大きさが指定できます。
<head> <title>Google Map API v3-11-2</title> <style type="text/css"> #infowindowclass { width: 400px; height: 100px; } </style> <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: "<div id='infowindowclass'>" + "InfoWindow - test<br />" + "<a href='http://www.google.co.jp/'>google検索</a>" + "</div>" }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(gmap, gmarker); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 500px; height: 300px;"></div> </body> </html>

投稿時刻 14:34 GoogleMap API, javascript | 個別ページ | コメント (2) | トラックバック (0)

「GoogleMap API V3」の使い方その10（ルート検索2）

■ルート検索の結果をルートレンダラで表示

「その９」の例では、ポリラインを使ってルート検索結果を描画しましたが、ルートレンダラを使えばそんな面倒なことはしなくても簡単に描画することができます。

ルートとルートレンダラのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [検索]ボタンをクリックされた時に、ルートの route メソッドを利用してルートのリクエストを行います。ルート検索の結果はroute メソッドで宣言された、コールバック関数に帰ってきます。コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、ルートレンダラのsetDirectionsメソッドにresultsを渡すことで、ルートが描画されます。
results[0]のプロパティとしてoverview_pathがありますが、緯度・経度の配列として格納されています。
<head> <title>Google Map API v3-10</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var directions; //ルートのインスタンス var directionRenderer; //ルートレンダラ var map; //マップのインスタンス var ds = google.maps.DirectionsStatus;//ルート結果のステータス var directionsErr = new Array(); //ルート結果のエラーメッセージ directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。"; directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。"; directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。"; directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; directionsErr[ds.REQUEST_DENIED] = "ウェブページではルートサービスを使用できません。"; directionsErr[ds.UNKNOWN_ERROR] = "サーバーエラーのため、ルートリクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。"; // Onload時処理 function initialize() { // ルートの生成 directions = new google.maps.DirectionsService(); // ルートレンダラの生成 directionRenderer = new google.maps.DirectionsRenderer(); // Google Mapで利用する初期設定用の変数 var mapOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(36.062092, 136.223323) }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); // ルートレンダラにマップを関連付ける directionRenderer.setMap(map); } // [検索]ボタン処理 function searchRoute() { // テキストボックスから検索の出発・到着を取得 var origin = document.getElementById("origin").value; var destination = document.getElementById("destination").value; // ルート検索を依頼する directions.route( { // ルートリクエスト 'origin' : origin, //出発地点 'destination': destination,//到着地点 'travelMode' : google.maps.DirectionsTravelMode.WALKING //ルートタイプ:徒歩 }, function(results, status) { // ルート結果callback関数 if (status == ds.OK) { // 結果がOK ?? // 結果をレンダラに渡し、ルートをマップに表示 directionRenderer.setDirections(results); } else { // 結果がOKではない場合 alert("ルート検索が失敗しました。理由: " + directionsErr[status]); } }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 520px; height: 400px;"></div> <div> <input id="origin" type="textbox" value="福井駅（福井）" size="40" ><br /> <input id="destination" type="textbox" value="福井県福井市役所" size="40" ><br /> <input type="button" value="検索" onclick="searchRoute()"> </div> </body> </html>

投稿時刻 14:51 GoogleMap API, javascript | 個別ページ | コメント (1) | トラックバック (0)

「GoogleMap API V3」の使い方その９（ルート検索）

■住所文字列からルート検索し、ルート描画

文字列の住所からルート検索を行い、そのルートをマップに表示します。

ルートのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [検索]ボタンをクリックされた時に、ルートの route メソッドを利用してルートのリクエストを行います。ルート検索の結果はroute メソッドで宣言された、コールバック関数に帰ってきます。コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。

statusがOKの場合、resultsはDirectionsResult オブジェクトの配列として返されてきます。返された配列の0番目の値にルート検索が入っています。 results[0]のプロパティとしてoverview_pathがありますが、緯度・経度の配列として格納されています。これを使ってポリラインを表示してやれば、マップ上にルートが描画されます。
<head> <title>Google Map API v3-9</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var directions; //ルートのインスタンス var map; //マップのインスタンス var ds = google.maps.DirectionsStatus;//ルート結果のステータス var directionsErr = new Array(); //ルート結果のエラーメッセージ directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。"; directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。"; directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。"; directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; directionsErr[ds.REQUEST_DENIED] = "ウェブページではルートサービスを使用できません。"; directionsErr[ds.UNKNOWN_ERROR] = "サーバーエラーのため、ルートリクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。"; // Onload時処理 function initialize() { // ルートの生成 directions = new google.maps.DirectionsService(); // Google Mapで利用する初期設定用の変数 var mapOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(36.062092, 136.223323) }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); } // [検索]ボタン処理 function searchRoute() { // テキストボックスから検索の出発・到着を取得 var origin = document.getElementById("origin").value; var destination = document.getElementById("destination").value; // ルート検索を依頼する directions.route( { // ルートリクエスト 'origin' : origin, //出発地点 'destination': destination,//到着地点 'travelMode' : google.maps.DirectionsTravelMode.WALKING //ルートタイプ:徒歩 }, function(results, status) { // ルート結果callback関数 if (status == ds.OK) { // 結果がOK ?? // ポリライン(折れ線)を生成し、マップに表示 var poly = new google.maps.Polyline({ map: map, //マップ path: results.routes[0].overview_path,//ポリラインの座標の列 strokeWeight: 5, //ストローク幅(ピクセル単位) strokeColor: "#f01010",//16進数形式のストロークの色 strokeOpacity: 0.5 //ストロークの不透明度(0.0～1.0) }); // 検索結果の中心設定 map.setCenter(results.routes[0].bounds.getCenter()); } else { // 結果がOKではない場合 alert("ルート検索が失敗しました。理由: " + directionsErr[status]); } }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 530px; height: 400px;"></div> <div> <input id="origin" type="textbox" value="福井駅（福井）" size="40" ><br /> <input id="destination" type="textbox" value="福井県福井市役所" size="40" ><br /> <input type="button" value="検索" onclick="searchRoute()"> </div> </body> </html>

投稿時刻 13:11 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

「GoogleMap API V3」の使い方その８（ジオコーディング）

■ジオコーディングより住所文字列から緯度・経度を取得

ジオコーディングを使って、文字列の住所から緯度・経度を取得し、その位置にマーカーを表示します。

ジオコーディングのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [Geocode]ボタンをクリックされた時に、ジオコーディングの geocode メソッドを利用してジオコーディングのリクエストを行います。ジオコーディング化の結果はgeocode メソッドで宣言された、コールバック関数に帰ってきます。

コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、resultsはGeocoderResultオブジェクトの配列として返されてきます。返された配列の0番目の値にジオコーディング結果が入っています。 results[0]のプロパティとしてaddress_components、geometry、typesがありますが、緯度・経度の値はgeometryのlocationを参照します。 <head> <title>Google Map API v3-8</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var geocoder; //ジオコーディングのインスタンス var map; //マップのインスタンス var gs = google.maps.GeocoderStatus;//ジオコーディング結果のステータス var geocoderErr = new Array(); //ジオコーディング結果のエラーメッセージ geocoderErr[gs.ERROR] = "Google サーバーへの接続に問題が発生しました。"; geocoderErr[gs.INVALID_REQUEST] = "この GeocoderRequest は無効でした。"; geocoderErr[gs.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; geocoderErr[gs.REQUEST_DENIED] = "ウェブページではジオコーダを使用できません。"; geocoderErr[gs.UNKNOWN_ERROR] = "サーバーエラーのため、ジオコーディングリクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; geocoderErr[gs.ZERO_RESULTS] = "この GeocoderRequest に対する結果が見つかりませんでした。"; // Onload時処理 function initialize() { // ジオコーディングの生成 geocoder = new google.maps.Geocoder(); // Google Mapで利用する初期設定用の変数 var mapOptions = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(36.062092, 136.223323) }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); } // [Geocode]ボタン処理 function codeAddress() { // テキストボックスから住所を取得 var address = document.getElementById("address").value; // ジオコーディングを依頼する geocoder.geocode( {'address': address}, // ジオコーディングリクエスト function(results, status) { // ジオコーディング結果callback関数 if (status == gs.OK) { // 結果がOK ?? // マップ中心設定 map.setCenter(results[0].geometry.location); // マーカー設定 var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { // 結果がOKではない場合 alert("ジオコーディングが失敗しました。理由: " + geocoderErr[status]); } }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 300px; height: 300px;"></div> <div> <input id="address" type="textbox" value="福井市大手1丁目1-1" size="40" > <input type="button" value="Geocode" onclick="codeAddress()"> </div> </body> </html>

投稿時刻 17:59 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

「GoogleMap API V3」の使い方その７（ポリライン・ポリゴン）

■マップ上にポリライン・ポリゴンを表示

マップ上にポリライン（折れ線）及び、ポリゴン（多角形）を表示します。
ポリラインを表示するにはPolylineクラスを生成し、それをマップ上に設定します。また、ポリゴンを表示するにはPolygonクラスを生成し、それをマップ上に設定します。

以下の例は、5個の座標を用いてそれぞれ同じ形のポリライン、ポリゴンを表示します。ポリゴンは内部を薄い色で塗りつぶしを行います。 <head> <title>Google Map API v3-7</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 map = new google.maps.Map(document.getElementById("map"), mapOptions); // ５個の座標(値は特に意味は無い) var latlngData = [ { lat:"36.067258", lng:"136.220604" }, { lat:"36.065487", lng:"136.230723" }, { lat:"36.062456", lng:"136.230704" }, { lat:"36.061456", lng:"136.220904" }, { lat:"36.063794", lng:"136.210064" } ]; // ５個の座標2(値は特に意味は無い) var latlngData2 = [ { lat:"36.057258", lng:"136.220604" }, { lat:"36.055487", lng:"136.230723" }, { lat:"36.052456", lng:"136.230704" }, { lat:"36.051456", lng:"136.220904" }, { lat:"36.053794", lng:"136.210064" } ]; var arrCoords = new Array(); for (i = 0;i < latlngData.length;i++) { // 座標地をlatlng値に変換 var latlng = new google.maps.LatLng(latlngData[i].lat, latlngData[i].lng); // latlng値を配列に退避 arrCoords.push(latlng); } var arrCoords2 = new Array(); for (i = 0;i < latlngData2.length;i++) { // 座標地をlatlng値に変換 var latlng2 = new google.maps.LatLng(latlngData2[i].lat, latlngData2[i].lng); // latlng値を配列に退避 arrCoords2.push(latlng2); } // ポリライン(折れ線)を生成し、マップに表示 var poly = new google.maps.Polyline({ map: map, //マップ path: arrCoords, //ポリラインの座標の列 strokeWeight: 5, //ストローク幅(ピクセル単位) strokeColor: "#f01010",//16進数形式のストロークの色 strokeOpacity: 0.5 //ストロークの不透明度(0.0～1.0) }); // ポリゴン(多角形)を生成し、マップに表示 var poly2 = new google.maps.Polygon({ map: map, //マップ paths: arrCoords2, //閉ループを示す座標列 strokeWeight: 5, //ストローク幅(ピクセル単位) strokeColor: "#f01010",//ストロークの色(16進数形式) strokeOpacity: 0.5, //ストロークの不透明度 fillColor: "#fc4040", //塗りつぶしの色(16進数形式) fillOpacity: 0.1 //塗りつぶしの不透明度(0.0～1.0) }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 400px; height: 400px;"></div> </body> </html>

投稿時刻 14:32 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

「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>
マップ上をクリックするとマーカーを表示します。
さらにそのマーカーをクリックすると緯度経度をウインドウに表示します。

投稿時刻 17:31 GoogleMap API, javascript | 個別ページ | コメント (7) | トラックバック (0)

「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>

投稿時刻 09:50 GoogleMap API, javascript | 個別ページ | コメント (2) | トラックバック (0)

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

■マップのイベント

マップなどの各種オブジェクトに対して、ユーザインターフェース等からのイベントを処理できるようになっています。
以下の例は、マップ上でクリックした場所の緯度・経度をアラートで表示します。
<head> <title>Google Map API v3-4</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); // マップのクリックイベントの関数登録 google.maps.event.addListener(gmap, 'click', function(event){ alert("クリック!! 緯度=" + event.latLng.lat() + " 経度=" + event.latLng.lng()); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>
「google.maps.event」の「addListener」メソッドを使って、イベントリスナーを登録します。「addListener」の引数について

addListener(instance, eventName, handler)

引数	タイプ	内容
instance	Object	対象オブジェクトのインスタンス (例ではマップなので gmap を渡す)
eventName	string	イベント名 ('click','dblclick','mouseup','mousedown','mouseover','mouseout'等)
handler	function	リスナ関数 (例の様に直接宣言するか、別に関数を宣言しその名前を指定)

この例のリスナ関数の引数は、MouseEventのオブジェクトが返されてきます。引数の名前を「event」としましたが、分かりやすい識別名を宣言します。「event」のオブジェクトには、タイプが「LatLng」のプロパティ「latLng」が存在します。それでタイプ「LatLng」の緯度取得メソッドである「lat()」を使って、緯度を取得します。

■マーカーのイベント

マーカーをクリックしたときに、アラートを表示する簡単な例を示します。
<head> <title>Google Map API v3-3</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: "福井駅" }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { alert("福井駅"); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>

マーカーのクリックイベントのハンドラで「function(event)」と宣言していますが、ブラウザによって返されるeventオブジェクトのプロパティが異なるため、これを利用することはないと思われます。

もし、マーカーの緯度経度を取得するのであれば、以下の様に位置（緯度経度）取得メソッドを使用します。
// マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { var latlng = this.getPosition(); alert("福井駅 lat:"+latlng.lat()+" lng:"+latlng.lng()); }); 補足説明ですが、「this」キーワードは、実行中のコードが「自分自身」を表すオブジェクトにアクセスするもので、この場合では、functionを持っているマーカーオブジェクトを指し示し、マーカーオブジェクトが持っているメソッドをアクセスすることができます。

投稿時刻 10:56 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (1)

「GoogleMap API V3」の使い方その３（マーカーの表示）

■簡単なマーカーの表示
前回の地図の上に、簡単なマーカーを表示したいと思います。
<head> <title>Google Map API v3-3</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({ position: latlng, // 緯度・経度は地図の中心 title: "maker-test" // ツールチップ }); // マーカーを地図の中心に表示 gmarker.setMap(gmap); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>
マーカーを表示するときは、最初にマップを生成します。その後、マーカーを生成し、マーカーをマップに関連付けて表示させます。
マーカーのオプションに「title: "maker-test"」を指定していますので、マーカーのところにカーソルを持っていくと "maker-test"のロールオーバーが表示されます。

マーカークラスについて詳しくは以下のURLを参照してください。
Marker クラス
尚、「setMap」を使わなくても、以下の様にオプションで一括で指定しても同じことができます。（マーカーの生成部分のみ抜粋）
// GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを地図の中心に表示(一括) var gmarker = new google.maps.Marker({ map: gmap, position: latlng, // 緯度・経度は地図の中心 title: "maker-test" // ツールチップ });

■複数マーカーの表示

複数のマーカーを表示したいことはよくあることだと思います。今回は５個の適当な緯度・経度のマーカーの表示を行います。
<head> <title>Google Map API v3-3</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 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({ position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng), title: markerData[i].title }); // マーカーを地図に表示 marker.setMap(gmap); } } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>

次回はイベントを取り上げたいと思います。

投稿時刻 11:17 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

「GoogleMap API V3」の使い方その２

前回に引き続き簡単な地図の表示に、各種コントロールの設定方法についてです。
<head> <title>Google Map API v3-2</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); // JR福井駅の緯度・経度 var mapOptions = { zoom: 14, mapTypeControl: true, // 地図の種別切り替えを表示 mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT, //右上配置 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR//水平ラジオボタンバー }, navigationControl: true, // 拡大縮小のナビを表示 navigationControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, //左上配置 style: google.maps.NavigationControlStyle.ZOOM_PAN //ズームスライド・移動パッド }, scaleControl: true, // 縮尺の表示 scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT, //左下配置 style: google.maps.ScaleControlStyle.DEFAULT //標準のスケール }, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 400px; height: 400px;"></div> </body> </html>

■mapTypeControl（地図の種別切り替え）

マップタイプコントロールの詳細を指定したい場合は、mapTypeControlをtrueにし、mapTypeControlOptionsの設定を行います。
mapTypeControlOptionsにはposition、style等のオプションがあります。それぞれの設定値は以下の通りです。

positionの設定は、以下のControlPositionクラスの定数値を用います。

定数	内容
`TOP`	上中央
`TOP_LEFT`	左上
`TOP_RIGHT`	右上
`LEFT`	左
`RIGHT`	右
`BOTTOM`	下中央
`BOTTOM_LEFT`	左下(Google ロゴの右側)
`BOTTOM_RIGHT`	右下(著作権の左側)

styleの設定は、以下のMapTypeControlStyleクラスの定数値を用います。

定数	内容
`DEFAULT`	デフォルトのマップタイプコントロール
`DROPDOWN_MENU`	ドロップダウンメニュー
`HORIZONTAL_BAR`	水平ラジオボタンバー

■navigationControl（拡大縮小のナビ）

拡大縮小のナビの詳細を指定したい場合は、navigationControlをtrueにし、navigationControlOptionsの設定を行います。

styleの設定は、以下のNavigationControlStyleクラスの定数値を用います。

定数	内容
`ANDROID`	小さいズームコントロール（Androidのマップソフトに似ている）
`DEFAULT`	デフォルトのナビゲーションコントロール
`SMALL`	ズームのみのナビゲーションコントロール
`ZOOM_PAN`	ズームスライドと双方向の移動パッド

■scaleControl（縮尺）

縮尺の詳細を指定したい場合は、scaleControlをtrueにし、scaleControlOptionsの設定を行います。

styleの設定は、以下のScaleControlStyleクラスの定数値を用います。定数値としては現状、「DEFAULT」しかないので、これを指定しなくても問題ありません。

投稿時刻 11:14 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

おやじプログラマー日記

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

おすすめ本

最近の記事

最近のトラックバック

Ranking

最近のコメント

アーカイブ

AccRanking

Ad

カテゴリ「GoogleMap API」の11件の記事

2011年7月29日 (金)

「GoogleMap API V3」の使い方その11（さらにInfowindow）

2011年6月 3日 (金)

「GoogleMap API V3」の使い方その10（ルート検索2）

2011年6月 1日 (水)

「GoogleMap API V3」の使い方その９（ルート検索）

2011年5月31日 (火)

「GoogleMap API V3」の使い方その８（ジオコーディング）

2011年5月30日 (月)

「GoogleMap API V3」の使い方その７（ポリライン・ポリゴン）

2011年5月27日 (金)

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

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

2011年5月26日 (木)

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

2011年5月25日 (水)

「GoogleMap API V3」の使い方その３（マーカーの表示）

2011年5月23日 (月)

「GoogleMap API V3」の使い方その２

検索

admax

カテゴリ

リンク

LSF

LPOP