- ベストアンサー
GoogleMapで・・
質問なのですが、PHPにてPOSTで受け取った住所の変数を利用してgeocoderを使って内部でMAPを作成してHTMLに吐き出すということを行いたいのですが、どうしても表示されず、困りはてています。 どなたか理想の手順等、ご教授していただける方がいましたらぜひよろしくお願いいたします。
- mahimahi02
- お礼率19% (9/47)
- PHP
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
今、geocorderの使い方までは調べてないのですが、 それ以前に javascript の文法エラーにかかりそうですね。 最初のmap.jsの中で geocoder.getLatLng( address , function( point ) { map.setCenter( point , 17 ); は()のつじつまが合ってないです。 javasciptコソールとか、エラーコンソールとかで見れば エラーが出ていると思いますよ。
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
> address = "{$setaddress}"; としていますが、"{$setaddress}"; には、どのような値が入っていますか？ （PHPに関する部分と思われます） > geocoder.getLatLng の引数にfunction( point ){}がありますが、pointにはどのような値が入っていますか？ (javascriptに関する部分と思われます）
お礼
返信ありがとうございます。 $setaddressには、POSTで取ってきた値を加工した日本語の住所が入ってきます。 そこが問題なのでしょうか・・？ 出力された.jsファイルでは確かに > address = "{$setaddress}"; addres = "東京都新宿区・・"; のように入っては来ています。 しかしそこから反応していないような・・MAP画面ではgoogleマークや利用規約のリンクは返ってきますがMAP自体はグレーになってしまっています。
補足
追加 やはり address = "{$setaddress}"; の"{$setaddress}に直接、緯度・経度に置き換えてアップしたところ、正常にMAPが表示されました。 住所を変換できていないのが原因のようなのですが解決策がなにかあるようならご指導いただけますでしょうか？
- fire--
- ベストアンサー率49% (146/293)
自分が以前書いたのを引っ張ってきました。 _MGmapGeocoder.getLatLng( address, function(point) { if (!point) { alert(address + " \u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002"); } else { _MGmapMap.setCenter(point, 13); var marker = new GMarker(point); _MGmapMap.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); 違いを見てみると、 (1)addMarkerはこの前に行っている。 (2)function(point)の中で、pointが取れたか判定している。 というところですね。 とりあえず、まずはgeocoderなしにして表示されるか確認し、 順番に機能を追加していってはどうでしょう。
お礼
返信ありがとうございます。 確認してみたのですがgeocoderなしでよくあるフォームから直接取得では問題なく表示されるのです。 pointに変換されていないのでしょうか・・
補足
追加 やはりaddressを直接、緯度・経度に置き換えてアップしたところ、正常にMAPが表示されました。 住所を変換できていないのが原因のようなのですが解決策がなにかあるようならご指導いただけますでしょうか？
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
とりあえず、 どの様に値を受け取って、 どの様に変数に入れて、 どの様なHTMLと どの様なJavaScriptが生成しているか くらいは書いた方が、的確な回答が得られると思います。
補足
返信ありがとうございます。そうですね。ソースを載せてみます。 まず、PHPにて$setaddressという変数に住所が入っているのを下記javascript用のテンプレートに書き出し、.jsで保存します。 var address; address = "{$setaddress}"; <!--{literal}--> function load(){ if( GBrowserIsCompatible() ){ var map = new GMap2( document.getElementById("cmap") ); var geocoder = new GClientGeocoder(); geocoder.getLatLng( address , function( point ) { map.setCenter( point , 17 ); } map.addControl( new GSmallMapControl() ); map.addControl( new GMapTypeControl() ); var mk = new GMarker( point ); map.addOverlay( mk ); } } <!--{/literal}--> 続いて下記HTMLを生成してこちらで上記の座標のMAPを生成したいと考えています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-jp"/> <title>アクセスMAP</title> <!--{literal}--> <script src="http://maps.google.com/maps?file=api&v=2&key=キー" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="map.js"></script> <!--{/literal}--> </head> <body onload="load()" onunload="GUnload()"> <div id="cmap" style="width: 500px; height: 300px;"></div> </body> </html> $setaddressに住所が入ってくるところまでは確認でき、それぞれのファイルが生成されるところまではできるのですが、表示がされず、問題点をご指摘いただければ幸いです。
お礼
ありがとうございます！ 初歩的なミスで気づいておりませんでした。 文法を修正したところ、MAPの枠までは表示が出たのですが肝心のMAPが帰ってきませんでした。 内部的におかしな点が未解決です・・ 修正後↓ var address; address = "{$setaddress}"; <!--{literal}--> function load(){ if( GBrowserIsCompatible() ){ var map = new GMap2( document.getElementById("cmap") ); var geocoder = new GClientGeocoder(); geocoder.getLatLng( address , function( point ) { map.setCenter( point , 17 ); map.addControl( new GSmallMapControl() ); map.addControl( new GMapTypeControl() ); var mk = new GMarker( point ); map.addOverlay( mk ) } ); } } <!--{/literal}-->