GoogleMapsAPIについて試みたがうまくいかない

2013/07/31 13:58

このQ&Aのポイント

GoogleMapsAPIを使用してMySQLの位置情報をPHPから渡して、GoogleMap上にマーカーを作成しようとしたが、うまくいかない。
XMLファイルを読み込んでGoogleMap上にマーカーを表示させることはできたが、phpファイルではうまくいかなかった。
アドバイスをいただければ幸いです。

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(); ?>

javajavascript
お礼率30% (4/13)

JavaScript
回答数5
ありがとう数1

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2013/08/02 10:30 回答No.5

こんにちは。ということは現状をまとめると・phpの動作は確認できる・直接URLを叩くとxmlが返ってくる・JavaScriptで直接xmlを指定すれば動作する・JavaScriptでxmlを取得しようとすると<?php ・・・ ?>とphpのソースがそのまま表示されるここらの情報から推測すると map.htmlをそのまま開いたりしていませんよね？ http://localhost/map.html と開けば downloadUrl("phpsqlajax_genxml.php", function(data) { にて実行されるのは http://localhost/phpsqlajax_genxml.php となり、サーバ上で実行されるのでxmlが出力されるはずです。仮にそのままmap.htmlを開いたとするとサーバ上で動いているわけではないので <?php ・・・ ?>と表示されてしまうはずです。もうこのくらいしか思いつきませんでした。

質問者

お礼 2013/08/02 11:03

動作することが出来ました。本当にありがとうございました。知識が乏しいもので…本当にすみません初歩的なミスでした。ですが解決できてよかったです。こんなに丁寧に回答していただけて大変うれしいです。本当にありがとうございました。

その他の回答 (4)

LancerVII
ベストアンサー率51% (1060/2054)

2013/08/01 08:07 回答No.4

こんにちは。 >phpファイルをdownloadUrlで読み込む際に、dataの中身にphpsqlajax_genxml.phpのソースがそのまま格納されていました。直接phpsqlajax_genxml.phpにアクセスするとxmlが表示されますと行っていましたが、上記の現象はどうみてもPHPが実行されていません。なのでJavaScriptで取得しているのはxml形式のファイルでないため動作していません。まずは<?php phpinfo(); ?>のみ記述したphpinfo.phpを適切なディレクトリに配置してURLを指定して表示して見てください。それで<?php ・・・ ?>が表示されたならphpが動いていません。まずはそこらへんの検証から必要な気がします。

質問者

補足 2013/08/02 09:35

遅くなって申し訳ありません。ご回答ありがとうございます。 <?php phpinfo; ?> のみを記述し、実行したところphpが動いていることを確認できました…

LancerVII
ベストアンサー率51% (1060/2054)

2013/07/31 16:16 回答No.3

こんにちは。動きませんでしたか。申し訳ございません。ちなみにどのような環境で試していますか？ブラウザやサーバー周り等。あとはFirebug等でデバッグが出来ますが、それで実行してみては如何でしょうか。動かないのであればなんかしら問題が起きているはずです。

質問者

補足 2013/07/31 20:48

ご回答ありがとうございます。ブラウザは、IE,Firefox,chromeを使用しています。サーバーに関しては、現在phpファイルを実行させるためにXAMPPを使用し、ローカルで行っています。大学内のPCを使用しています。Windows7 デバッグに関してですが、あまり使い方がわからなかったのですがエラーはでませんでした。ですが、phpファイルをdownloadUrlで読み込む際に、dataの中身にphpsqlajax_genxml.phpのソースがそのまま格納されていました。 <?php require("sql-info.php"); … ?> 知識が乏しく、回答になっていなくてすみません。

LancerVII
ベストアンサー率51% (1060/2054)

2013/07/31 15:39 回答No.2

こんにちは。ということはJavaScriptは恐らく問題無いと思いますので以下が原因かと思います。 header("Content-Type:text/xml; charset=utf-8"); 下記に変更してみてください。 header("Content-Type: application/xml; charset=utf-8"); これで多分動作すると思いますが如何でしょうか。

質問者

補足 2013/07/31 15:56

ご回答ありがとうございます。試してみたのですがうまくいきませんでした…

LancerVII
ベストアンサー率51% (1060/2054)

2013/07/31 15:11 回答No.1

こんにちは。まず確認なのですが、JavaScriptからではなく直接そのXMLを出力するPHPにアクセスした場合どのような表示になりますか？想定されているXMLが出力されていますか？または何かエラーになったりしていませんか？

質問者

補足 2013/07/31 15:25

ご回答ありがとうございます。 XMLを出力するphpに直接アクセスした場合、想定したXMLは表示されています。また、XMLを出力するphpをXMLファイルにして、そのXMLを読み込むと、GoogleMap上にマーカーが表示されます。なので、phpファイルは読み込めないという形です。エラーなどは特には出ていません。

GoogleMapsAPIについて試みたがうまくいかない

GoogleMapsAPIについて