日本語住所から、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);
}
};
補足情報がいただけなかったので、間違っているかもしれませんが……
aftergeo関数がジオコーディング完了の前に呼ばれているのが原因だと思います。
なお、スタックオーバーフローや 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