「GoogleMaps API V3」マーカーの表示、複数マーカーの表示

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

今回は地図の上に、簡単なマーカーを表示したいと思います。

■簡単なマーカーの表示

<head>
<title>Google Map API v3-3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" 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=MyKeyCode" 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>

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

■簡単なマーカーの表示

■複数マーカーの表示

■関連記事

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