日本語住所から、google map APIを用いて、複数のマーカーを地図上に表示させるコードを作っています。
複数の住所は、for文を用いてGeocode処理しています。
また、Geocodeの返り値は非同期処理とのことで、callback関数を使って、すべて住所の緯度経度を取得してから地図を完成させるようにコーディングしています。
実際に当コードを実行してみると、画面上には何の表示もされず(地図は出てこず真っ白)、chromeのデベロッパーツールのconsole上でも何のエラーも表示されません。
コード中にalertを入れて確認してみると、住所の緯度経度自体はきちんと取得できています。
しかし、地図の中心点を指定する変数の部分はundefinedとなっていました。
いろいろ試行錯誤したのですが、どこが間違っているのか、煮詰まって先に進めません。
(callback関数の使い方を含め、いろいろ違っているかと思います。)
何がおかしいのか、ご指摘いただけますでしょうか。
<script>
function initMap() {
var addresses = [
'東京都千代田区永田町1丁目7-1',
'東京都千代田区霞が関2丁目1番1号',
'東京都千代田区霞が関1-1-1',
'東京都千代田区霞が関2-1-3'
];
var latlng = []; //緯度経度の値をセット
var marker = []; //マーカーの位置情報をセット
var myLatLng; //地図の中心点をセット用
var geocoder;
geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map_canvas'));//地図を作成する
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) { // ステータスがOKの場合
latlng[i]=results [0].geometry.location;// マーカーを立てる位置をセット
marker[i] = new google.maps.Marker({
position: results [0].geometry.location, // マーカーを立てる位置を指定
map: map // マーカーを立てる地図を指定
});
} else { // 失敗した場合
}//if文の終了。ifは文なので;はいらない
}//function(results, status)の終了
);//geocoder.geocodeの終了
}//for文の終了
callback();//全て取得できたらaftergeo実行
}//function geo終了
function aftergeo(){
myLatLng = latlng[0];//最初の住所を地図の中心点に設定
var opt = {
center: myLatLng, // 地図の中心を指定
zoom: 16 // 地図のズームを指定
};//地図作成のオプションのうちcenterとzoomは必須
map.setOptions(opt);//オプションをmapにセット
}//function aftergeo終了
};//function initMap終了
</script>