技術メモ1年目

技術のメモ

GoogleMap APIのjavascriptメモ

以下のAPIを利用
developers.google.com

javascript

/**
 * 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;
}