マーカー(アイコン)を表示させるのであれば、複数のマーカーを表示させたい。
v2でPHP+MySQLが使えないときに、XMLファイルから読み込んだ手を試してみる。
参照ページ;Google グルーディスカッションのサンプルより
◆Google Maps V3 XMLファイルからのマーカー+インフォウィンドウ読み込み
- Head内にutil.jsファイルを指定。ダウンロードは、GooglMaps のサンプルコードのページから。
- 名前や座標データを記述したXMLファイルを用意。サンプル(ソースを見るで確認)
◆Head記述
util.jsファイルをmataに追加。
<script type=”text/javascript” src=”util.js”></script>
<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 サンプル
◆Google Maps JavaScript API V3
関連記事一覧
スポンサードリンク
Leave a Comment