google maps api で、マーカーを追加するタイミングについて

Question

疑問点

下記のソースコードでは、マーカーが表示されません。

var map;
var prefectures = []; //この配列には、都道府県の緯度経度が記載されています。

function initMap() {
    center = new google.maps.LatLng(35.01833, 139.5986);
    map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 7
    });
}


function showPrefectureMarkers() {
    for(var i = 0; i < prefectures.length; i++){
        prefectureMarkers[i] = new google.maps.Marker({
            position : {lat : prefectures[i].Latitude, lng : prefectures[i].Longitude},
            map : map
        });
    }
}

window.initMap = initMap; 
showPrefectureMarkers();

marker.setMap 関数で追加しようとしても表示されませんでした。

var map;
var prefectures = []; //この配列には、都道府県の緯度経度が記載されています。

function initMap() {
    center = new google.maps.LatLng(35.01833, 139.5986);
    map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 7
    });
}


function showPrefectureMarkers() {
    for(var i = 0; i < prefectures.length; i++){
        prefectureMarkers[i] = new google.maps.Marker({
            position : {lat : prefectures[i].Latitude, lng : prefectures[i].Longitude}
        });
        prefectureMarkers[i].setMap(map);  //変更点。
    }
}

window.initMap = initMap; 
showPrefectureMarkers();

showPrefectureMarkers 関数を、initMap 関数の中で呼び出せば表示されます。

var map;
var prefectures = []; //この配列には、都道府県の緯度経度が記載されています。

function initMap() {
    center = new google.maps.LatLng(35.01833, 139.5986);
    map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 7
    });
    showPrefectureMarkers();
}


function showPrefectureMarkers() {
    for(var i = 0; i < prefectures.length; i++){
        prefectureMarkers[i] = new google.maps.Marker({
            position : {lat : prefectures[i].Latitude, lng : prefectures[i].Longitude},
            map : map
        });
    }
}

window.initMap = initMap; 

#質問
initMap 関数完了後であれば、いつでもマーカーを追加出来ると思っていたのですが、なぜ表示されないのでしょうか？

Comments

[cx20]

ブラウザのデベロッパーツール（F12）のコンソールにエラーが出ていないでしょうか？

Answer 1

恐らく initMap() 関数が呼ばれていないのだと思います。
以下のように Maps JavaScript API の読み込み元となる URL に &callback=initMap を加えるか、initMap()関数を個別に呼び出すような対応が必要かと思います。

■ 概要  |  Maps JavaScript API | Google Developers
https://developers.google.com/maps/documentation/javascript/overview?hl=ja

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

callback でなく直接呼び出す場合は、

//window.initMap = initMap; 
initMap();

とすることで呼び出せるかと思います。

Comments

[grantsdale_vga]

ありがとうございます！

initMap 関数の1行目に、alert('initMap'); を、
showPrefectureMarkers 関数の1行目に alert('showPrefectureMarkers'); を記述した結果、
マーカーが表示されない時 ( 質問の例の1番目と2番目 ) は、
alert('showPrefectureMarkers'); が先に実行されていました。

マーカーが表示された時 ( 3番目 ) は、
alert('initMap'); が先に実行されていました。