- ベストアンサー
GoogleMapAPIで複数のマーカーの設置
GoogleMapAPIで複数のマーカーの設置を考えています。 DBから受け取った複数の緯度、経度を利用したいのですが、このようなことはできるでしょうか？ よろしくお願いいたします。
- eccschool
- お礼率8% (53/644)
- JavaScript
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- taketan_mydns_jp
- ベストアンサー率58% (450/773)
またまた失礼します（笑）。 補足の >PHPとJavaScript部分の連動はどのように処理 とありますが、書き出していたらキリがありません。ものすごくたくさんあります。JavaScriptで使う場合は、JSONに変換して出力するのが一番楽じゃないですかね。 例えば、PHP側でDBから得た下の$dboutようなデータがあるとします（DBから とってきたデータはだいたいこんなもんだと思います）。それを、JSONオブジェクトに変換します。 <?php $dbout[0] = array ( "lat"=>38.5,"lon"=>139.2,"name"=>"データ1","address"=>"住所1"); $dbout[1] = array ( "lat"=>38.3,"lon"=>135.2,"name"=>"データ2","address"=>"住所2"); // .......以下、いくつでも同じです。 $json = " <script type='text/javascript'> var DBObj = { Items: [ "; $cnt = count($dbout); for($i=0;$i<$cnt;$i++){ $j[$i] = " Item : { "; $d = ""; foreach($dbout[$i] as $key => $val){ $d[] = " $key : \"$val\""; } $j[$i] = implode("," , $d )." }"; } $json .= implode(",",$j). "] } </script>"; echo $json; ?> これで出力されるのは var DBObj = { Items: [ lat : "38.5", lon : "139.2", name : "データ1", address : "住所1" }, lat : "38.3", lon : "135.2", name : "データ2", address : "住所2" } ] } と言うようなオブジェクトです。 これをJavaScriptで読み取り、Google Mapsのマーカーにします。例えば http://www.geekpage.jp/web/google-maps-api/marker-3.php のサンプルをもとに、繰り返し処理をするとすれば、 function setMarker (Obj){ var point = new GLatLng(Obj.lat,Obj.lon); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(marker, 'click', function() { marker.openInfoWindow( document.createTextNode(Obj.name + Obj.address)); }); } for(var i=0;i<DBObj.Items.length;i++){ setMarker (DBObj.Items[i] ); } というようにすれば良いかと。 ソースは非検証です。
補足
<body onload="load();showAddress('')">の部分はどうしたらよいのでしょうか？教えてください。よろしくお願いいたします。
- steel_gray
- ベストアンサー率66% (1052/1578)
- steel_gray
- ベストアンサー率66% (1052/1578)
- steel_gray
- ベストアンサー率66% (1052/1578)
GoogleMapAPIのマーカーは複数に対応しています。 一個ができてるなら、あとは必要な数だけマーカーの登録処理を繰り返すだけだと思います。
補足
PHPとJavaScript部分の連動はどのように処理するのでしょうか？
補足
ご教授ありがとうございます。 Jsonというのは初めて聞きました。 ところでいまだにうまくいかない状況です。 <body onload="load();showAddress('@@addr@@');setMarker()"> の部分ですがこの場合どのように記述すればいいのでしょうか？ よろしくお願いいたします。