GoogleMapsAPIについて
いろいろと調査をして、試みたのですがうまくいかないため質問させていただきます。
今回、MySQLの位置情報のデータをPHPに渡し、XMLファイルを生成し、GoogleMap上にマーカーを作成しようと考えています。
そこで以下のURLを参考に作成してみたのですが、GoogleMap上にマーカーが表示されません。
http://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja
XMLファイルを読み込んでGoogleMap上にマーカーを表示させることができたのですが、phpファイルですとどうもうまくいきません。
アドバイスをいただければ幸いです。
[map.html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId:google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = parseXml(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: point,
});
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.responseText,request.status);
}
};
request.open('GET',url,true);
request.send(null);
}
function parseXml(str){
if(window.ActiveXObject){
var doc=new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.loadXML(str);
return doc;
}else if(window.DOMParser){
return(new DOMParser).parseFromString(str,'text/xml');
}
}
function doNothing(){}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 600px; height: 600px"></div>
</body>
</html>
[phpsqlajax_genxml.php]
<?php
require("sql-info.php");
//スタートXMLファイル、親ノード作成
$dom = new DOMDocument("1.0");
$node = $dom -> createElement("markers");
$parnode = $dom -> appendChild($node);
//MySQLサーバへの接続
$connection = mysql_connect('localhost',$username,$password);
if(!$connection){
die('Not connected :' . mysql_error());
}
//MySQLデータサーバのセット
$db_selected=mysql_select_db($database,$connection);
if(!$db_selected){
die ('Can\'t use db : ' . mysql_error());
}
// テーブルデータの全行列を選択
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: '. mysql_error());
}
header("Content-Type:text/xml; charset=utf-8");
// 各XMLノードへのデータ追加を繰り返す
while ($row = @mysql_fetch_assoc($result)){
//XMLドキュメントノードに追加する
$node = $dom->createElement("marker");
$newnode = $parnode->appendchild($node);
$newnode->setattribute("name", $row['name']);
$newnode->setattribute("address", $row['address']);
$newnode->setattribute("lat", $row['lat']);
$newnode->setattribute("lng", $row['lng']);
$newnode->setattribute("type", $row['type']);
}
echo $dom->saveXML();
?>
お礼
ご回答ありがとうございます。 ご提示の方法で試してみます。