<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。
- (その1)外部XMLファイルでなく内部ソースにマーカー用の配列を記述する。
- (その2)マーカーのインフォウィンドウ(吹き出し)を地図の中心座標に表示させるpanTo()メソッドを使ったサンプル
- (その3)イベントリスナー’dragstart’で、地図をドラッグしたらマーカーのインフォウィンドウ(吹き出し)を閉じて削除する。
- (その4)マーカー(アイコン)の配列についての検証(2次元配列を理解してみる)
- (その5)XMLファイル(配列)の複数マーカーから特定markerのインフォウィンドウ(infowindow)を最初から一つだけ表示するサンプルデモ完成
◆ Google Maps API v3 / 外部XMLファイルの変わりにjavascript内にマーカー用の配列を記述する。
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内にマーカー用の配列を記述するサンプルデモ
◆Google Maps JavaScript API V3
関連記事一覧
スポンサードリンク
3 Comments.