9

Ich habe die Dokumente und Beispiele gelesen, aber es scheint, ich kann den Initialisierungsfehler nicht lösen ("Uncaught ReferenceError: google ist nicht definiert" + Uncaught ReferenceError: homeLatLng ist nicht definiert) beim Versuch, die Datei markerwithlabel.js einzufügen und es erinnert mich an die "Sie können nicht etwas laden, bevor die Karte fertig ist" prob.Google Maps API: markerwithlabel.js - Uncaught ReferenceError: google ist nicht definiert

Was kann ich tun?

Was versucht wurde:

<head> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> 
<script type="text/javascript"> 
    var map; 
    function initMap() { 

      map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 14, 
       center: {lat: 52.5200066, lng: 13.404954} 
      }); 

      var marker1 = new MarkerWithLabel({ 
        position: homeLatLng, 
        draggable: true, 
        raiseOnDrag: true, 
        map: map, 
        labelContent: "$425K", 
        labelAnchor: new google.maps.Point(22, 0), 
        labelClass: "labels", // the CSS class for the label 
        labelStyle: {opacity: 0.75} 
      }); 
    } 
</script> 

..

Antwort

13

markerwithlabel.js erfordert eine bereits geladene Karten-API.

Wenn Sie die maps-API asynchron laden (wie Sie es in Ihrem Code tun), gibt es keine Garantie, dass die maps-API geladen wird, wenn markerwithlabel.js geladen wird.

Lösung: Laden Sie die Karten-API

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=mykey"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> 
<script type="text/javascript"> 
    var map; 
    function initMap() { 

      map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 14, 
       center: {lat: 52.5200066, lng: 13.404954} 
      }); 

      var marker1 = new MarkerWithLabel({ 
        position: homeLatLng, 
        draggable: true, 
        raiseOnDrag: true, 
        map: map, 
        labelContent: "$425K", 
        labelAnchor: new google.maps.Point(22, 0), 
        labelClass: "labels", // the CSS class for the label 
        labelStyle: {opacity: 0.75} 
      }); 
    } 
google.maps.event.addDomListener(window, 'load', initMap); 
</script> 
+0

synchron perfekt Dies funktioniert. (: Danke für die Erklärung! – maxxyoo

+0

Vielen Dank. :-) Ich habe Stunden damit verschwendet, es auszuarbeiten. – user1355041

+0

"http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js" existiert nicht. – Meysam

Verwandte Themen