- ベストアンサー
GoogleMapAPIで初期位置の表示
- GoogleMapAPIを使用して、DBから受け取った値を初期の地図に表示する方法を教えてください
- アドレスを指定して、GoogleMapAPIを利用して地図上にマーカーを表示する方法を教えてください
- Google Maps JavaScript APIを使って、DBから受け取った値を初期位置として表示する方法を教えてください
- eccschool
- お礼率8% (53/644)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です、ちょっと修正しました。bodyのonloadでinit() とshowAddress("初期アドレス"); を呼んでいます。また、初期のセンター位置は削除しています。 /////////////// <!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> <title>Google Maps JavaScript API Example - simple</title> <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAGR96B8NWJ5VrSWIv27tpXBSenpJ8l8MfLQKeoeFDO_cNaY6XCBTeqxU6L5cdduVJoyhFLVFsw72YRA" type="text/javascript" charset="UTF-8"></script> </head> <body onload="load();showAddress('<?=$DBaddress?>')"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> //<![CDATA[ var map = null; var geocoder = null; // 初期化 // <body onload="load()"> で呼び出されています function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } } // DBからのデータを入れます function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } //ここでshowAddress()にDBからのデータを入力します //]]> </script> <div id="map" style="width:500px; height:600px"></div> </body> </html> ///////////////////// 前のはちゃんと検証していなかったのでうまく動かなかったかもしれません。失礼しました。
その他の回答 (1)
- taketan_mydns_jp
- ベストアンサー率58% (450/773)
先ほどのものです。 混乱していますね。下記ソースで試してみて下さい。 $DBaddress = "DBから取得したアドレス"; $aipKey = "Google Maps APIのキー"; とした場合、 /////////////// test.php ///////////////////////// <!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> <title>Google Maps JavaScript API Example - simple</title> <script src="http://maps.google.com/maps?file=api&v=2&key=<?=$apiKey?>" type="text/javascript" charset="utf-8"></script> </head> <body onload="load()"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> //<![CDATA[ var map = null; var geocoder = null; // 初期化 // <body onload="load()"> で呼び出されています function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.67431, 139.69082), 13); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } } // DBからのデータを入れます function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } //ここでshowAddress()にDBからのデータを入力します showAddress('<?=$DBaddress?>'); //]]> </script> <div id="map" style="width:500px; height:600px"></div> </body> </html> /////////////////////////////////////// 以上、 http://www.geekpage.jp/web/google-maps-api/geocoder-0.php を改変 改変した部分は、フォームの部分を削除し、その代わりにshowAddress()へDBからの住所($DBaccess)を入れた事です。 参考まで。
補足
ありがとうございます。 こちらの意図としてはブラウザの起動と同時にDBから住所情報を取り出して表示をさせたいです。 このソースだと渋谷の情報が初期表示されてしまします。 // 初期化 // <body onload="load()"> で呼び出されています function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.67431, 139.69082), 13); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } } をどのようにしたら良いのか・・・と困っています。 よろしくお願いいたします
お礼
有難うございます。 うまくいきました。 Javascriptが苦手で・・・。 試行錯誤で時間を浪費してしまいました。 本当に丁寧に教えていただき感謝しています。