Google Maps Geocoding: „Google ist nicht definiert“

Question

Ich bin immer ein Problem, wenn ich versuche, diesen Code zu laden, und ich kann nicht verstehen, warum es nicht funktioniert ...

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var geocoder = new google.maps.Geocoder(); 
     $(".textarea-autosize").autosize(); 

     geocoder.geocode({ 
      address: '{$order->address_delivery["address1"]},{$order->address_delivery["postecode"]},{$order->address_delivery["city"]}' 
      }, function(results, status) { 
      if (status === google.maps.GeocoderStatus.OK) 
      { 
       var delivery_map = new google.maps.Map(document.getElementById('map-canvas'), { 
        zoom: 10, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: results[0].geometry.location 
       }); 
       var delivery_marker = new google.maps.Marker({ 
        map: delivery_map, 
        position: results[0].geometry.location, 
        url: 'http://maps.google.com?q={$order->address_delivery["address1"]},{$order->address_delivery["postcode"]},{$order->address_delivery["city"]}' 
       }); 
       google.maps.event.addListener(delivery_marker, 'click', function() { 
        window.open(delivery_marker.url); 
       }); 
      } 
     }); 
    }); 

    // Fix wrong maps center when map is hidden 
    $('#tabAddresses').click(function(){ 
     x = delivery_map.getZoom(); 
     c = delivery_map.getCenter(); 
     google.maps.event.trigger(delivery_map, 'resize'); 
     delivery_map.setZoom(x); 
     delivery_map.setCenter(c); 

    }); 
</script> 

Die Fehler occurrs auf dem var geocoder = new google.maps.Geocoder();

Dann habe ich versucht, das folgende Skript zu laden: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

und ich einen anderen Fehler:

'Uncaught TypeError: Cannot read property 'offsetWidth' of null'

Hat jemand eine Vorstellung davon, warum es nicht funktioniert?

Answer 1

Google Maps werden zu dem Zeitpunkt nicht geladen, an dem Sie sie aufrufen möchten. Sie sollten dies werden:

HTML:

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

JS:

function initMap() { 
    // Google maps are now initialized. 
} 

Sie müssen die async and defer Attribute in Ihrem Skript enthalten - dies wird sicherstellen, dass der Rest der Website halten Laden, anstatt darauf zu warten, dass das Skript geladen wird (was praktisch ist, weil es ziemlich groß ist). Zweitens übergeben Sie den "Rückruf" -Parameter beim Aufruf des Skripts. Dies ist der Name der Funktion, die beim Laden des Skripts ausgeführt werden soll. Auf diese Weise können Sie sicherstellen, dass Sie die Karte nur initialisieren, wenn sie tatsächlich geladen und in Ihrem Fenster vorhanden ist.