WordPressにGoogle Maps API V3！

＜目次＞始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ（infowindow）を最初から表示する。

• （その1）外部XMLファイルでなく内部ソースにマーカー用の配列を記述する。
• （その2）マーカーのインフォウィンドウ（吹き出し）を地図の中心座標に表示させるpanTo（）メソッドを使ったサンプル
• （その3）イベントリスナー’dragstart’で、地図をドラッグしたらマーカーのインフォウィンドウ（吹き出し）を閉じて削除する。
• （その4）マーカー（アイコン）の配列についての検証(２次元配列を理解してみる)
• （その5）XMLファイル（配列）の複数マーカーから特定markerのインフォウィンドウ（infowindow）を最初から一つだけ表示するサンプルデモ完成

XMLファイルを横にらみしながらですと判りずらいので、配列データをコード内に用意します。こんな感じで

	var markers =
	[
	['公園1', 35.760191,140.061629,'kouen'],
	['公園2', 35.643033,139.860592,'kouen'],
	['公園3', 35.596286,140.141172,'kouen'],
	['温泉1', 35.805307,140.16651,'onsen'],
	['温泉2',35.717602,139.980167,'onsen'],
	['温泉3', 35.42295,139.89739,'onsen'],
	['水族館1',36.333294,140.593817,'suizokukan'],
	['水族館2', 35.442851,139.644607,'suizokukan'],
	['水族館3', 35.728681,139.719765,'suizokukan']
	];

左から、ココの要素の名称、座標lat,lng、カテゴリ分けをするための「kouen」「onsen」「suizokukan」です。

これを、XMLファイルからマーカーデータを読み出すサンプルと置き換えます。

<script type="text/javascript">
var center = new google.maps.LatLng(35.67849, 139.39178);
var zoom = 8;
var mapTypeId = google.maps.MapTypeId.ROADMAP
</script>
<script type="text/javascript">
var marker;
var defmarker;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize()
{

	var myOptions =
	{
	zoom: zoom,
	center: center,
	mapTypeId: mapTypeId
	}
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	var markers = [
	['公園1', 35.760191,140.061629,'kouen'],
	['公園2', 35.643033,139.860592,'kouen'],
	['公園3', 35.596286,140.141172,'kouen'],
	['温泉1', 35.805307,140.16651,'onsen'],
	['温泉2',35.717602,139.980167,'onsen'],
	['温泉3', 35.42295,139.89739,'onsen'],
	['水族館1',36.333294,140.593817,'suizokukan'],
	['水族館2', 35.442851,139.644607,'suizokukan'],
	['水族館3', 35.728681,139.719765,'suizokukan']
	];

	for (var i = 0; i < markers.length; i++)
	{
	var marker = markers[i];

	var name = marker[0];
	var latlng = new google.maps.LatLng(marker[1], marker[2]);

	var category =  marker[3];
 	var html = '<div style="height: 100px; width: 200px"><b>'+name+'</b>'  ;

	createMarker(latlng,html,map,category,name)
	}

}

function createMarker(latlng,html,map,category,name)
{
	var iconOffset = new google.maps.Point(34, 34);
	var iconPosition = new google.maps.Point(0, 0);
	var iconSize = new google.maps.Size(34, 34);
	var iconShadowSize = new google.maps.Size(37, 34);

	var kouenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.png";
	var kouenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png";
	var kouenIcon = new google.maps.MarkerImage(kouenUrl, iconSize, iconPosition, iconOffset);
	var kouenShadow = new google.maps.MarkerImage(kouenShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var onsenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png";
	var onsenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png";
	var onsenIcon = new google.maps.MarkerImage(onsenUrl, iconSize, iconPosition, iconOffset);
	var onsenShadow = new google.maps.MarkerImage(onsenShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var suizokukanUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.png";
	var suizokukanShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.shadow.png";
	var suizokukanIcon = new google.maps.MarkerImage(suizokukanUrl, iconSize, iconPosition, iconOffset);
	var suizokukanShadow = new google.maps.MarkerImage(suizokukanShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var customIcons =
	{
	kouen: {icon:kouenIcon,shadow:kouenShadow},
	onsen: {icon:onsenIcon,shadow:onsenShadow},
	suizokukan: {icon:suizokukanIcon,shadow:suizokukanShadow}
	};

	var icon = customIcons[category] || {};

	var marker = new google.maps.Marker(
	{
	map: map,
	position: latlng,
	icon: icon.icon,
	shadow: icon.shadow,
	title: name
	});

 	google.maps.event.addListener(marker, 'click', function()
	{
           	 infoWindow.setContent(html);
           	 infoWindow.open(map,marker);
	});
} 

window.onload = initialize;
</script>

<div  id="map_canvas"></div>

これでjavascriptのコード内の配列からマーカーデータを読み込んで地図を表示するサンプルの完成です。
ここで本題から脱線しますが、次を地図に少し手を入れておきます。

• インフォウィンドウの中心座標での表示、
• インフォウィンドウの削除について（気がついたので）

（つづく）

◆ Google Maps API v3　外部XMLファイルの変わりにjavascript内にマーカー用の配列を記述するサンプルデモ

• javascriptのコード内の配列からマーカーデータを読み込んで地図を表示するサンプル

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク