Google maps api, xmlデータ

質問

mysqlに格納したデータをphpにてxmlデータを生成しました。
xmlデータは、◯◯.phpファイルです。
このデータをHTML5とjavascriptを使ってgoogleマップに表示させるところでつまづいています。

いろいろと参考になりそうなサイトを見てコーディングしているのですが、うまくいきません。

シンプルにマップにデータを表示させるということに関してアドバイスや参考になるサイト等を教えて戴けないでしょうか。

宜しくお願いします。

回答No.1

noname#161640 · ベストアンサー

うまくいきません、だけだとどこが問題かわからないので、もう少し情報を書くようにしましょう。XMLを読み込んでGoogleマップに独自マップとしてデータを登録する、というのは、シンプルにといってもそれなりの作業が必要です。

1. XMLデータの取得。
2. XMLデータをもとに、JavaScriptオブジェクト（XmlDocument）へのパース。
3. XmlDocumentから必要な要素のオブジェクトを取得。
4. Google Maps APIでマーカーを追加するには、まずnew google.maps.LatLngで位置オブジェクトを作成し、それをもとにnew google.maps.Markerでマーカーオブジェクトを作成して組み込む。

Maps　API　v.3ベースで考えてあります。どこまでできていますでしょうか。これらの処理を実装しないといけないので、シンプルといってもそこそこコードを書かないといけません。

ちなみに、一番引っかかるのが、XMLデータからのパースでしょう。Ajaxを利用して取得するのであれば、responseXMLでパース済みのオブジェクトを取得できます。これが一番簡単なやり方だろうと思います。後は、手順さえわかっていれば難しくはありません。

var map = new google.maps.Map(略);

// Ajaxのコールバック関数
function callback(request){
var xmlDoc = request.responseXML;
var datas = xmlDoc.documentElement.getElementsByTagName("各データの要素");
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
var point = new google.maps.LatLng(data[i].getAttribute("緯度"),data[i].getAttribute("経度"));
var options = {
position: point,
map: map,
title: data[i].getAttribute("タイトル")
};
var marker = new google.maps.Marker(options);
}
}

AjaxでXMLを取得できるなら、コールバック関数での処理はこんな感じになるでしょう。XMLデータの構造などはそれぞれのコードにあわせて修正して下さい。もしAjaxを利用しないということであれば、XMLのパースは別に考えて下さい。

お礼

ありがとうございます。
アドバイス頂いた内容を参考にもう少し調べてみます。