GoogleMap API V3で複数のマーカーを表示吹き出しは1つだけにする
お店を紹介するサイトを作ろうということで、複数のお店の位置情報を1つのマップで表示するために、
GoogleMapで複数のマーカーを1つの地図に表示する方法を調べました。
また、マーカーをクリックすると吹き出しが表示されますが、複数の吹き出しを表示せずに同時に表示する吹き出しは1つとします。
使用するGoogleMap APIはV3です。
JSDocの書き方がよくわかっていないので、コメントの書き方が間違っているかもしれません。
まずは、HTMLファイル
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script src="./js/gmap.js" type="text/javascript"></script> <script type="text/javascript"> function initialize(id){ gmap_initialize(id); var data = new Array(); data.push({position: new google.maps.LatLng(34.687574,135.189857), title: 'ローソン', content: 'ローソン 神戸中央西町 <br/><a href=\'http://www.lawson.co.jp/\'>HP</a>'}); data.push({position: new google.maps.LatLng(34.6882,135.188087), title: '南京町広場', content: '南京町広場'}); setMarkerData(data); } </script> <title>GoogleMapTest1</title> </head> <body onload="initialize('gmap_canvas')"> <div id="gmap_canvas" style="width: 480px; height: 320px;"></div> </body> </html>
- 最初のscriptタグで、GoogleMap APIを読み込みます。
- 2つ目のscriptタグで、自作したGoogleMap用のJavaScriptを読み込みます。
- 3つ目のscriptタグで、GoogleMapの初期化とマーカーデータを作成してマーカーを地図に設定します。
- bodyタグ内に実際にGoogleMapを表示する領域(div id:gmap_canvas)を作成します。
/** * 開始ズームサイズ * @type Number */ var START_ZOOM = 16; /** * 開始中心位置 * @type google.maps.LatLng */ var START_CENTER = new google.maps.LatLng(34.687463, 135.18813); /** * GoogleMapオブジェクト * @type google.maps.Map */ var gmap; /** * 現在開いている情報ウィンドウ * @type google.maps.InfoWindow */ var openInfoWindow; /** * GoogleMapの初期処理 * @param {String} id GoogleMap表示領域ID */ function gmap_initialize(id) { /** * 地図オプション * @param Object */ var mapOption = { zoom: START_ZOOM, center:START_CENTER, mapTypeId: google.maps.MapTypeId.ROADMAP, navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT } }; gmap = new google.maps.Map(document.getElementById(id), mapOption); } /** * マーカーデータのセット * @param {Object} マーカーデータ */ function setMarkerData(makerArray) { // 登録データ分のマーカーを作成 for (var i = 0; i < makerArray.length; i++) { var markerData = makerArray[i]; var marker = new google.maps.Marker({ position: markerData.position, title: markerData.title, map: gmap }); // マーカーのclickリスナー登録 setMarkerClickListener(marker, markerData); } } /** * マーカーのクリックイベントリスナーの登録 * @param {google.maps.Marker} marker マーカーオブジェクト * @param {Object} markerData マーカーに設定する情報ウィンドウデータ */ function setMarkerClickListener(marker, markerData) { // マーカークリック時に情報ウィンドウを開く。 // すでに開いているウィンドウがある場合は、閉じてから開く。 google.maps.event.addListener(marker, 'click', function(event) { if (openInfoWindow) { openInfoWindow.close(); } openInfoWindow = new google.maps.InfoWindow({ content: markerData.content }); google.maps.event.addListener(openInfoWindow,'closeclick',function(){ openInfoWindow = null; }) openInfoWindow.open(marker.getMap(), marker); }); } }
- まず、最初に地図を表示する場合の中心位置とズームサイズを設定します。
- gmap_initialize関数では地図オブジェクトを作ります。
- setMarkerData関数では、データ数分のマーカーオブジェクトを作成し、クリックイベントリスナーを登録します。setMarkerClickListenerが実際の登録処理です。
これで、1つの地図に複数データが表示できるようになりました。
参考: