• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:GoogleMaps API 住所から複数ピンを表示)

GoogleMaps API 住所から複数ピンを表示

このQ&Aのポイント
  • GoogleMaps APIを使って住所から複数のピンを表示する方法を教えてください
  • GoogleMaps APIを使ってDBの住所から座標を取得し、複数のピンを立てる方法を教えてください
  • GoogleMaps APIを使って日本語の住所から座標を取得し、同じ地図上に複数のピンを表示する方法を教えてください

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

失礼します。No1,No2の回答の続きです。 No2回答でPHPからXMLを返せるようになったら、それをAJAXして、 GoogleMapにマーカーを加えるhtml(javascript)です。 ※ライブラリーは使ってません。Google Map APIのみです。 ※ちょっと、余計な技巧に走って、地図内のマーカーだけでなく、  2段組にして、左側にマーカー名と住所も表示し、そいつをクリック  すると、地図が対応するマーカーまで移動して、吹き出しを開くように  なっています。 (なんかCSSできれいにおもいどおりレイアウトするのがよくわからん とりあえず崩れて無いと思うが) プログラムのソースコードは、 (gcodingXML.htm)================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Google Map From XML DATA</title> <script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps?file=api&v=2&key=あなたのGoogle APIキー"></script> <script type="text/javascript" charset="utf-8"> <!-- var map; function Mapload(){ if(GBrowserIsCompatible()){ map = new GMap2(document.getElementById("map"),{size:new GSize(640,480)}); map.setCenter(new GLatLng(35.655, 139.744),18); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); set_xmldata_marker(); } } function set_xmldata_marker(){ var XmlHttp = GXmlHttp.create(); XmlHttp.open("GET","/php/geocodingXML.php",true); XmlHttp.onreadystatechange = GetXmlObj; XmlHttp.send(null); function GetXmlObj(){ if (XmlHttp.readyState == 4 && XmlHttp.status == 200){ var xml=XmlHttp.responseXML; var marker_data=xml.getElementsByTagName("marker"); var marker_navi = document.getElementById("marker_navi"); for(var i=0;i<marker_data.length;i++){ var point = new GLatLng(marker_data[i].getAttribute("lat"),marker_data[i].getAttribute("lng")); map.panTo(point); var marker = new GMarker(point,{clickable:true}); map.addOverlay(marker); var closure = GEvent.callbackArgs(marker,function(html){ this.openInfoWindowHtml(html); map.panTo(this.getLatLng()); },marker_data[i].getAttribute("name")           +'<br>' + marker_data[i].firstChild.nodeValue); GEvent.bind(marker,'click',closure,function(){ this.apply(arguments); }); var dt = document.createElement("dt"); dt.innerHTML=marker_data[i].getAttribute("name"); marker_navi.appendChild(dt); GEvent.bindDom(dt,'click',closure,function(){ this.apply(arguments); }); var dd = document.createElement("dd"); dd.innerHTML=marker_data[i].firstChild.nodeValue; dd.style.marginLeft = '5px'; dd.style.marginBottom = '5px'; marker_navi.appendChild(dd); GEvent.bindDom(dd,'click',closure,function(){ this.apply(arguments); }); } } } } // --> </script> <body onload="Mapload()" onunload="GUnload()"> <h2>Google Map From XML DATA</h2> <div style="width:800px;text-align:left;margin:0 auto;"> <div id="map" style="float:right;width:640px;height:480px;border:1px solid black;"></div> <div>項目をクリックして移動</div> <dl id="marker_navi" style="float:left;width:145px;padding-left:0px;margin-left:0px;"></dl> <hr style="clear:both;display:none;"> </div> </body> </html>

すると、全ての回答が全文表示されます。

その他の回答 (2)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

というわけで、まずはサーバー側(PHP)の見本 ※MySQL準備してないので、テキストファイル(CSV形式)から住所を読み込んでます。 ※こんなXMLを返します。 <?xml version="1.0" encoding="UTF-8"?> <places> <marker name="marker1" lat="35.830509" lng="139.7885203">日本埼玉県草加市西町541-5</marker> <marker name="marker2" lat="35.6752276" lng="139.7677976">日本東京都中央区銀座1丁目</marker> <marker name="marker3" lat="35.6909226" lng="139.7572061">日本東京都千代田区一ツ橋1丁目1</marker> </places> プログラムのソースコードは、 (geocodingXML.php)================== <?php setlocale(LC_ALL,'ja_JP'); header('Content-Type: text/xml; charset=utf-8'); $fin = fopen("address.csv","rb"); $row = 1; $xml = xmlwriter_open_memory(); xmlwriter_start_document($xml,"1.0","utf-8"); xmlwriter_set_indent_string($xml," "); xmlwriter_start_element($xml,"places"); while (($data = fgetcsv($fin,1000,",")) !== FALSE){ $addr = $data[0]; mb_convert_variables("UTF-8","auto",$addr); list ($sarch_addr,$lat,$lng) = googleGeoCoding($addr); if (!$sarch_addr==""){ xmlwriter_set_indent($xml,true); xmlwriter_start_element($xml,"marker"); xmlwriter_write_attribute($xml,"name",'marker' . $row ); xmlwriter_write_attribute($xml,"lat",$lat ); xmlwriter_write_attribute($xml,"lng",$lng); xmlwriter_text($xml,$sarch_addr); xmlwriter_end_element($xml); xmlwriter_set_indent($xml,false); } $row++; } fclose($fin); xmlwriter_end_element($xml); echo xmlwriter_output_memory($xml); function googleGeoCoding($addr){ $apikey = "あなたのGoogle APIキー"; $GeoUrl = "http://maps.google.com/maps/geo?"; $addr = rawurlencode($addr); $request = "&q=" . $addr . "&key=" . $apikey . "&hl=ja&output=json" ; $json = file_get_contents( $GeoUrl . $request); $json = json_decode(mb_convert_encoding($json, "UTF-8", "auto")); while ($json->Status->code == '620'){ usleep(200000); $json = file_get_contents( $GeoUrl . $request); } if($json->Status->code == '200'){ if ($json->Placemark[0]){ $json->Placemark = $json->Placemark[0]; } $sarched_addr = $json->Placemark->address; $sarched_Lon = $json->Placemark->Point->coordinates[0]; $sarched_Lat = $json->Placemark->Point->coordinates[1]; }else{ $sarched_addr = "";$sarched_Lat="";$sarched_Lon=""; } return array($sarched_addr,$sarched_Lat,$sarched_Lon); } ?> こんな感じ、 次は、javascript 続く.....

すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

ご提示のソースコードを工夫して、複数件対応にする事はやぶさかでは ありませんが、このような場合サーバー側でDBを読み込む処理と、 クライアント側のブラウザーのjavascriptでGoogleMapを操作する処理は、 非同期なものですから、本来は切り離して処理した方がベターかも。 サーバー側は、HTTPリクエストによってDBを読み込んで住所を、HTMLとか XML、JSON等のテキストデータとして出力します。javascript側は非同期 通信で取得したそのデータを使って、ジオコーディングし、地図にマッピン グするようにします。非同期通信には、GmapAPIクラスの GXmlHttp、GXml、 GDownloadUrlを使えます。 http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GXmlHttp 複数ジオコーディングの注意点としては、GClientGeocoderに連続して 要求を出すと、ステータスコード620が返されエラーになります。 タイムラグしてループさせるか、代わりにHTTPジオコーダーリクエスト を使います。 http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GClientGeocoder

すると、全ての回答が全文表示されます。

関連するQ&A