スポンサードリンク

PHP+MySQL(XMLファイル生成)+Google Maps API V3/地図表示サンプル

とりあえず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 file
downloadUrl(“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

スポンサードリンク

Related Posts
  1. 管理人様と同じようにやっているつもりなのですが、
    マーカーどころか地図すら表示されません、、、。

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">