とりあえずMySQLからデータを引っぱって表示させてみた。 せっかくなので、Googelコードを試す。参照ページは「Google マップと PHP/MySQL を使用」。このページ、以前はV2だったが、V3用に変わっていた。下記サンプル地図の表示マーカー数は、172マーカー。ちと重いかな。 iPhone(アイフォン)でサンプル地図をWi-Fiでなく3G回線で読み込んでみたが、まあ動くでないの。Google Maps API V3のスマートフォン対応恐るべし。次回は、MarkerClusterer+PHP+MySQL(XMLファイル生成)+Google Maps API V3を練習する予定。 ◆Script記述
<script type=”text/javascript”>//<![CDATA[var customIcons = {kouen: {icon: ‘http://maps.google.co.jp/mapfiles/ms/icons/tree.png’,shadow: ‘http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png’},doubutsu: {icon: ‘http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.png’,shadow: ‘http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.shadow.png’}};function load() {var map = new google.maps.Map(document.getElementById(“map_canvas”), {center: new google.maps.LatLng(35.68407, 139.63623),zoom: 11,mapTypeId: ‘roadmap’});var infoWindow = new google.maps.InfoWindow;// Change this depending on the name of your PHP filedownloadUrl(“http://waox.main.jp/news/maps/googlemapsapi/example/kouen-demo.php“, function(data) {var xml = data.responseXML;var markers = xml.documentElement.getElementsByTagName(“marker”);for (var i = 0; i < markers.length; i++) {var name = markers[i].getAttribute(“name”);var explanation = markers[i].getAttribute(“explanation”);var category = markers[i].getAttribute(“category”);var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute(“lat”)),parseFloat(markers[i].getAttribute(“lng”)));var linkurl = markers[i].getAttribute(“linkurl”);var html = ‘<div style=”height: 150px; width: 200px”><b>’+name+'</b><br>’+explanation+'</b><br>’+linkurl+'</b>’ +‘<form action=”http://maps.google.co.jp/maps” method=”get” target=”_blank”>’ +‘<input value=”ここへのルート検索” type=”submit”>’ +‘<input type=”hidden” name=”daddr” value=”‘ + point.lat() + ‘,’ + point.lng() +‘”/>’ ;var icon = customIcons[category] || {};var marker = new google.maps.Marker({map: map,position: point,icon: icon.icon,shadow: icon.shadow,title: name});bindInfoWindow(marker, map, infoWindow, html);}});}function bindInfoWindow(marker, map, infoWindow, html) {google.maps.event.addListener(marker, ‘click’, function() {infoWindow.setContent(html);infoWindow.open(map, marker);});}function downloadUrl(url, callback) {var request = window.ActiveXObject ?new ActiveXObject(‘Microsoft.XMLHTTP’) :new XMLHttpRequest;request.onreadystatechange = function() {if (request.readyState == 4) {request.onreadystatechange = doNothing;callback(request, request.status);}};request.open(‘GET’, url, true);request.send(null);}function doNothing() {}//]]></script>
◆Google Maps JavaScript API V3 サンプル
◆Google Maps JavaScript API V3
関連記事一覧
スポンサードリンク
管理人様と同じようにやっているつもりなのですが、
マーカーどころか地図すら表示されません、、、。