地図が既に読み込まれた後にGoogleマップにマーカーを追加するにはどうすればよいですか？

Question

私は、単純なPhoneGapのアプリに取り組んでいる - 私は座標を収集するために自分の家の周りペースだ：私は完璧に動作documentation hereをチェックアウトしてい

var positions = [ 
    {lat:123.12313123, lng:123.123345131}, 
    {lat:123.12313123, lng:123.123345131} 
] 

。その例では、initMap()が作成されたときに私が理解しているものからのスクリプトdefer asyncが発生します。 initMap()には1つのマーカーがあります。これは私のアプリで完璧に動作し、Strayaでマーカーを表示します。

まず、私はマップを作成します。

var map; // making it global 

    function initMap() { 
    var myLatLng = {lat: 39.909736, lng: -98.522109}; // center US 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: myLatLng 
    }); 
    } 

これは、マップを描画します。今度は、私の座標を反復したいと思います。

// Remember, the map has already loaded at this point 
$(positions).each(function(i, item) { 
      var marker = new google.maps.Marker({ 
      position: item, 
      map: map, 
      title: 'Route item ' + i 
      }); 
     }) 

これは機能しません。ループ内にinitMap()を実行することはできません。とにかく動作しません。私は完了するまで彼らが何であるか分からないので、あらかじめ設定された数の座標でinitMap()を実行することはできません。私はここで間違って何をしていますか？

Answer 1

これはスコープの問題です。マップを初期化すると、var mapと表示され、というローカル変数がinitMap関数内に作成されます。これは、グローバルmap変数がまだ初期化されていないことを意味します。マーカーを作成すると、マーカーに渡す変数mapが定義されていないため、マーカーをマップに配置しません。 varキーワードを削除して、あなたの新しい地図機能の外に、元のグローバルmap変数に代入されますので、同じよう：

var map; // making it global 

    function initMap() { 
    myLatLng = {lat: 39.909736, lng: -98.522109}; // center US 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: myLatLng 
    }); 
    } 

また無関係なノートとして、私はあなたが延期が何をするか非同期誤解だと思います。 asyncとdeferの属性を持つスクリプトを読み込むときは、ページ全体が読み込まれるまでブラウザに指示してから、スクリプトをロードします。 googleマップの場合、スクリプトの実際のURLには、スクリプトがロードされたときに呼び出す関数の名前（&callback=initMap）も渡します。

ブラウザがページ全体を読み込んだ後、Googleマップスクリプトを取得し、Googleマップスクリプトを実行して、使用できるようにすべてのGoogleマップコードを取得してから、そのコードでinitMapを呼び出します。

Answer 2

mapをinitMap機能の外に1回、内側に1回2回宣言しています。これは、グローバルmap変数がundefinedのままであることを意味します。譲渡の前からvarを削除します。

map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: myLatLng 
    }); 

は今、あなたはあなたの関数のスコープ外map変数にマップのインスタンスを割り当てる代わりに、あなたの世界と衝突する新しいマップ変数を作成します。

また、可能な場合、これらのグローバル変数を回避するために、多くの場合、良いでしょう忘れないでください:)