人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

google map APIで複数の住所をマーカー表示したい

日本語住所から、google map APIを用いて、複数のマーカーを地図上に表示させるコードを作っています。
実際に当コードを実行してみると、画面上には何の表示もされず(地図は出てこず真っ白)、chromeのデベロッパーツールのconsole上でも何のエラーも表示されません。
いろいろ試行錯誤したのですが、どこが間違っているのか、煮詰まって先に進めません。
何がおかしいのか、ご指摘いただけますでしょうか。
function initMap() {
var addresses = ['ここに日本語住所',];
var latlng = [];
var marker = [];
var myLatLng;
var geocoder;
var map = new google.maps.Map(document.getElementById('map_canvas'));
geocoder = new google.maps.Geocoder();


geo(aftergeo);

function geo(callback){
for (var i = 0; i < 3; i++) {
geocoder.geocode({'address': addresses[i]},
function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
latlng[i]=results [0].geometry.location;
marker[i] = new google.maps.Marker({
position: results [0].geometry.location,
map: map
});
} else {
}
});
}
callback();
}

function aftergeo(){
myLatLng = latlng[0];
var opt = {
center: myLatLng,
zoom: 16
};
map.setOptions(opt);
}
};

●質問者: funaino1
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Lhankor_Mhy

補足情報がいただけなかったので、間違っているかもしれませんが……
aftergeo関数がジオコーディング完了の前に呼ばれているのが原因だと思います。


funaino1さんのコメント
お返事遅くなりました。 お詫びします。 API呼び出しのscript要素は、公開すると不特定多数に利用されそうなので、申し訳ありませんが、控えさせて頂ければと思います。 HTMLはこうなっております。 <html lang="ja"> <head> <meta charset="utf-8"> <title>複数の住所から複数のマーカー</title> <style type="text/css"> html, body, #map_canvas { width: 100%; height: 100%; } </style> <script src="API呼び出しのscript要素" defer></script> <script> ここの部分は上記記載済 </script> </head> <body> <div id="map_canvas"></div> </body> </html> >aftergeo関数がジオコーディング完了の前に呼ばれているのが原因だと思います。 仰るとおりで、では、aftergeo関数をどのタイミングで呼び出せばよいのか、そこが分かれば解決するのだと思います。今の状態だと、ジオコーディング前にaftergeo関数が走ってしまい、myLatLng変数に値がなく、エラーになってしまいます。 どうぞよろしくお願いいたします。

Lhankor_Mhyさんのコメント
aftergeo関数はジオコーディングのコールバック関数の中で実行されるべきだと思います。 また、ループカウンタのスコープにも注意したほうがいいと思います。

funaino1さんのコメント
ご指摘ありがとうございます。 geo関数内のcallback();は、aftergeo関数を指しているので、(一応)geocodeのループの中には入っているという認識です。 ループカウンタのスコープは、まだまだ認識が浅く、もっと調べてみます。

Lhankor_Mhyさんのコメント
いえ、geocoder.geocodeのコールバックの中から呼ばれるべきだと思います。 そうしないと、ジオコーディングの終了前に呼ばれてしまいます。 geocoder.geocode({'address': addresses[i]}, ??function(results, status) { ????//... ????callback(); ??});

Lhankor_Mhyさんのコメント
ああ、マルチポストしているのですね。 https://ja.stackoverflow.com/questions/49515/google-map-api%E3%81%A7%E8%A4%87%E6%95%B0%E3%81%AE%E4%BD%8F%E6%89%80%E3%82%92%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%9F%E3%81%84 解決したら、こっちも質問を閉じてくださいね。

Lhankor_Mhyさんのコメント
なお、スタックオーバーフローや teratail など、マルチポストは嫌われがちですからお気をつけて。 https://ja.meta.stackoverflow.com/questions/2418/%E3%83%9E%E3%83%AB%E3%83%81%E3%83%9D%E3%82%B9%E3%83%88%E3%81%A8%E3%81%AF%E3%81%AA%E3%82%93%E3%81%A7%E3%81%99%E3%81%8B-%E4%BD%95%E3%81%8B%E5%95%8F%E9%A1%8C%E3%81%8C%E3%81%82%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ