おやじプログラマー日記 : 「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>

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