「GoogleMaps API V3」 の使い方その3(マーカーの表示)

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

■簡単なマーカーの表示

<head>
<title>Google Map API v3-3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" 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"     // ツールチップ
	});

■複数マーカーの表示

複数のマーカーを表示したいことはよくあることだと思います。
今回は5個の適当な緯度・経度のマーカーの表示を行います。

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

	// 5個のマーカー(座標に特に意味は無い)
	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」の使い方その1
「GoogleMaps API V3」の使い方その2
「GoogleMaps API V3」の使い方その4(イベント)
「GoogleMaps API V3」の使い方その5(続イベント)
「GoogleMaps API V3」の使い方その6(続々イベント)
「GoogleMaps API V3」の使い方その7(ポリライン・ポリゴン)
「GoogleMaps API V3」の使い方その8(ジオコーディング)
「GoogleMaps API V3」の使い方その9(ルート検索)
「GoogleMaps API V3」の使い方その10(ルート検索2)
「GoogleMaps API V3」の使い方その11(さらにInfowindow)

ページのトップへ戻る