WordPressにGoogle Maps API V3！

マーカー（アイコン）を表示させるのであれば、複数のマーカーを表示させたい。

ｖ2でPHP+MySQLが使えないときに、XMLファイルから読み込んだ手を試してみる。

参照ページ；Google グルーディスカッションのサンプルより

◆Google Maps V3　XMLファイルからのマーカー+インフォウィンドウ読み込み

1. Head内にutil.jsファイルを指定。ダウンロードは、GooglMaps のサンプルコードのページから。
2. 名前や座標データを記述したXMLファイルを用意。サンプル（ソースを見るで確認）

◆Head記述

util.jsファイルをmataに追加。

<script type=”text/javascript” src=”util.js”></script>

◆Script記述

<script type=”text/javascript”>

var infowindow;

var map;

function initialize() {

var myLatlng = new google.maps.LatLng(35.68407, 139.63623);

var myOptions = {

zoom: 8,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

downloadUrl(“http://waox.main.jp/maps/xml/simple.xml”, function(data) {

var markers = data.documentElement.getElementsByTagName(“marker”);

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

var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute(“lat”)),

parseFloat(markers[i].getAttribute(“lng”)));

var marker = createMarker(markers[i].getAttribute(“name”), latlng);

}

});

}

function createMarker(name, latlng) {

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

google.maps.event.addListener(marker, “click”, function() {

if (infowindow) infowindow.close();

infowindow = new google.maps.InfoWindow({content: name});

infowindow.open(map, marker);

});

return marker;

}

</script>

◆Google Maps JavaScript API V3　サンプル

• XMLファイル読み込み
• ｐｈｐからxmlを読み込んだサンプル

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク