Google Maps lädt keine Daten

Ich arbeite mit einem Projekt, wo ich Angular verwenden muss. Es ist mein erster Kontakt mit diesem Framework, damit ich Fehler machen kann.Google Maps lädt keine Daten

Ich erstellte die Funktion initMap(), die von Google Maps API Callback aufgerufen wurde (Parameter &callback=initMap in <script src="..">.., wenn ich für Google API-Datei aufrufen).

Meine Funktion initMap() Warten auf bag Variable Werte - es ist globale Variable, die Städte enthält, die ich als Marker verwenden möchte. Ich weiß, dass es eine sehr schlechte Übung ist, aber ich verbringe viel Zeit, um Daten aus dem Winkelbereich zu bekommen - aber ich bin noob und ich kann es nicht tun. Lassen Sie uns weitermachen - wenn ich Daten empfangen Ich schaffe neue Objekt über

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

Danach habe ich für idle Ereignis warte und dann habe ich Markierungen auf meiner Karte.

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

Und hier ist eine Magie - SOMETIMES Karte wird nicht geladen. Ich erhalte eine graue Box, Google-Logo in der unteren linken Ecke und nichts mehr. Wenn ich in diesen Listener console.log(..) setze, erhalte ich in der Konsole meine Protokollnachricht.

Wenn ich hart aktualisieren (zum Beispiel Ctrl + F5) dann funktioniert alles (immer).

Meine erste Idee ist zu entfernen defer von script Tag (weil in FireBug Network kann ich sehr lange laden analitycs Skript sehen) - aber es hilft mir nicht.

Und wirklich bitte - nicht mit Kommentaren wie "noob Spam, keine globalen Variablen". Wenn es mir nicht helfen kann - bitte mach kein Durcheinander.

Grüße

Quelle

2016-09-15 ventaquil

Lassen Sie mich wissen, wenn Sie Ihr Problem mit meiner Antwort beheben können. – AndreaM16

Wenn Sie AngularJS verwenden Sie Ihre Karte Trog ng-init="MapController.initMap()"init können.

Wie auch immer, Sie müssen mehr Code teilen, weil es unmöglich ist zu verstehen, welches das Problem von hier ist.

Sie sollten eine AngularJS Google Maps App wie Kick-Start:

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. Es friert wirklich nie ein oder verursacht Probleme wie Ihres.
Jetzt können Sie es auch mit einem directive initialisieren. Werfen Sie einen Blick auf this answer of mine about initializing it with a directive mit .
Und schließlich, Here you can Find another Plunker I made to add n markers to your map and make them clickable (showing information).

Ich hoffe, ich war hilfreich.

Quelle

2016-09-16 07:20:41 AndreaM16

Google Maps lädt keine Daten

Antwort

Verwandte Themen