Web/DB プログラミング徹底解説

ホーム > Google API > Google Map API を利用して地図上にマーカーを表示する

Google Map API を利用して地図上にマーカーを表示する

スポンサーリンク

地図を広げられて「ここです!」といわれても、指をさしたり、何かで印をつけてくれないと、一体どこのことだかわからないですよね。

Google Maps API でも地図上にアイコンをおくことによって、場所を指し示すことができます。

場所を指し示すアイコンをマーカーなどと呼ぶ場合があるので、ここでもマーカーといいます。

地図上にマーカーをおくサンプル

ここで作るサンプルプログラムは次のとおりです。

マーカーが二点おいてあります。

コードは次のとおりです。

<script 
 type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script 
 type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
	points = [
		{ 
			"name": 'Disneyland', 
			"lat": 33.813061, 
			"lon": -117.918892
		},
		{ 
			"name":	'Chinese Theatre', 
			"lat": 34.101556, 
			"lon": -118.340724
		}
	];
	
	showMap(points);
});

function showMap(points){
	
	var i, map, mapOptions, lines, bounds, ll;
	var latlngs = [];
	
	// 地図の表示オプション
	mapOptions = {
		zoom: 3,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControlOptions: { 
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		}
	};

	map = new google.maps.Map(
		document.getElementById('map_canvas'),
		mapOptions);

	// 境界の設定	
	bounds = new google.maps.LatLngBounds();
	
	for(i=0;i<points.length;i++){
		ll = new google.maps.LatLng(points[i].lat, points[i].lon);
		latlngs.push(ll);
		bounds.extend(ll);
	}
	
	map.fitBounds(bounds);
	
	// マーカーの作成
	for(i=0;i<latlngs.length;i++){
		new google.maps.Marker({
			position: latlngs[i],
			map: map,
			draggable: false
		});
	}
}
</script>
<div id="map_canvas" style='width:400px;height:300px;'></div>

基本的な部分は Google Map API を利用して地図を表示する と同様です。 先にそちらをざっとみておいてください。違うところを説明していきます。

地図の表示範囲の指定

ここでは2点のマーカーを表示しています。その2点を含む範囲の地図を表示しなければなりません。 ズームをしすぎても2点が見えなくなりますし、かといって引きすぎてもよく見えなくて都合がよくありません。

2点共見える程度に、ちょうど良いくらいの zoom 具合を指定するにはどうすれば良いでしょうか

これをするには、境界を表す LatLngBounds オブジェクトを利用します。

LatLngBounds の extend メソッドに LatLng オブジェクトを渡すと、その LatLng で示した場所を含むエリアを境界として認識します。

ここでは2点ポイントがありますから、LatLngBounds オブジェクトの extend メソッドにその2点を渡します。

それから Map オブジェクトの fitBounds メソッドにこの境界オブジェクト (google.maps.LatLngBounds) を渡します。 すると、その2点を含むエリアを地図の境界となるように中心点およびズームが設定されます

マーカーの作成

Google Maps マーカーマーカーの作成は非常に単純です。

google.maps.Marker オブジェクトを作成すれば、自動的に地図上にマーカーが表示されます。 デフォルトでは影付きのいちじく状 (? ピン?) のアイコンがマーカーになります。

スポンサーリンク
ホーム > Google API > Google Map API を利用して地図上にマーカーを表示する