Googleマップでデータがロードされていません

私は角度を使用する必要があるプロジェクトで作業しています。私はこのフレームワークに私が最初に触れるので、いくつかの間違いをすることができます。Googleマップでデータがロードされていません

Google Maps APIコールバック（Google APIのファイルを呼び出すと&callback=initMap：<script src="..">..）で呼び出された関数initMap()を作成しました。

私の機能initMap() 変数値を待っています - それはマーカーとして使用したい都市を含むグローバル変数です。私はそれが本当に悪い習慣であることを知っていますが、Angularスコープからデータを取得するのに多くの時間を費やしています - しかし、私はうなずけだし、できません。さんが上に移動してみましょう - 私はデータを受信したとき、私はその後、私はidleイベントを待っていた後、私は地図上のマーカーを置く

var map = new google.maps.Map(document.getElementById('map'), mapOptions)

を経由して新しいオブジェクトを作成しています。

google.maps.event.addListenerOnce(map, 'idle', function() { 
    // Put markers 
});

ここでは魔法です - 時には地図が読み込まれません。グレーボックス、Googleロゴを左下に表示します。 console.log(..)をこのリスナーに入れると、私のログメッセージがコンソールに表示されます。

ハードリフレッシュ（たとえば、Ctrl + F5）を実行すると、すべて正常に機能しています（常に）。

deferをscriptタグから削除することです（FireBugネットワークでは非常に長い負荷のanalitycsスクリプトが表示されるため）。しかし、それは私を助けません。

本当にありがとうございます。「noob、グローバル変数は使用しないでください。それが私を助けることができなければ - 混乱をしないでください。

よろしく

出典

2016-09-15 ventaquil

私の答えで問題を解決できるかどうか教えてください。 – AndreaM16

あなたはAngularJSを使用している場合は、あなたのマップトラフng-init="MapController.initMap()"をinitすることができます。

とにかく、ここから問題のどれかを理解することは不可能なので、より多くのコードを共有する必要があります。

あなたがすべきキックスタートAngularJS Googleマップのアプリをのような：

HTML：

<html ng-app="mapApp"> 
. . . 
    <body ng-controller="MapController" ng-init="MapController.initMap()"> 
    <div id="map"></div> 
    </body> 
</html>

JS：

angular.module('mapApp', []); 

angular 
    .module('mapApp') 
    .controller('MapController', MapController); 

    function MapController(){ 

    var vm = this; 

    vm.initMap = function() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: new google.maps.LatLng(32.483, 16.084) 
     }); 
    } 
    }

CSS：

#map{ 
     height: 400px; 
     width: 700px; 
}

Here You can find a Plunker I made with the code Above。それは決してあなたのような問題を引き起こすことはありません。
ここでは、directiveで初期化することもできます。 this answer of mine about initializing it with a directiveとIts Plunkerをご覧ください。
最後に、Here you can Find another Plunker I made to add n markers to your map and make them clickable (showing information)。

私は助けてくれることを願っています。

出典

2016-09-16 07:20:41 AndreaM16

Googleマップでデータがロードされていません

答えて

関連する問題