GoogleMap APIのjavascriptメモ
以下のAPIを利用
developers.google.com
/** * googleMapAPIを利用する際のscript */ var map; var marker = []; var infoWindow = []; var markerData = []; var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 //イベントの情報、緯度、経度を格納していく関数 function setArray(info,lat,lng,url){ var temp = {name : info, lat : parseFloat(lat), lng : parseFloat(lng), url : url}; markerData.push(temp); }; function initMap() { // 地図の作成 var mapLatLng = new google.maps.LatLng({ lat : markerData[0]['lat'], lng : markerData[0]['lng'] }); // 緯度経度のデータ作成 map = new google.maps.Map(document.getElementById('map'), { // #に地図を埋め込む center : mapLatLng, // 地図の中心を指定 zoom : 9, // 地図のズームを指定 mapTypeId: google.maps.MapTypeId.HYBRID }); // マーカー毎の処理 for (var i = 0; i < markerData.length; i++) { markerLatLng = new google.maps.LatLng({ lat : markerData[i]['lat'], lng : markerData[i]['lng'] }); // 緯度経度のデータ作成 marker[i] = new google.maps.Marker({ // マーカーの追加 position : markerLatLng, // マーカーを立てる位置を指定 map : map // マーカーを立てる地図を指定 }); infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加 content : 'ここに情報ウィンドウに表示させるHTMLを記載', // 吹き出しに表示する内容 }); markerEvent(i); // マーカーにクリックイベントを追加 } } // マーカーにクリックイベントを追加 function markerEvent(i) { marker[i].addListener('click', function() { // マーカーをクリックしたとき //別のwindowを表示させるとき現在のwindowを閉じる if(currentInfoWindow != null){ currentInfoWindow.close(); } infoWindow[i].open(map, marker[i]); // 吹き出しの表示 currentInfoWindow = infoWindow[i]; }); }
以下をhtmlに記載しmap表示
<div id="map"></div>
最後にCSS
/* map */ #map { height: 300px; width: 1300px; margin: 0 auto; }