Google Maps API gibt ReferenceError Google ist nicht definiert

Question

Ich verwende Google Maps, um den Hersteller in meiner Datenbank zu speichern. Und Firebug zeigt ReferenceError: google ist nicht definiert Fehler. Allerdings wird die Karte angezeigt, aber die Schaltfläche "Senden" scheint nicht zu funktionieren. Hier ist mein Code.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $googlemapkey;?>&callback=initialize" type="text/javascript"></script> 

<script> 
    // Ajax/upload part 
$(document).ready(function() { 
    // initialize Google Maps 
    initialize(); 
    // save marker to database 
    $('#submitButton').click(function() { 
    // we read the position of the marker and send it via AJAX 
    var position = marker.getPosition(); 
    $.ajax({ 
     url: 'update_map.php', 
     type: 'post', 
     data: { 
     lat: position.lat(), 
     lng: position.lng(), 
     id : <?php echo $id;?> 
     }, 
     success: function(response) { 
     // we print the INSERT query to #display 
     $('#output').html(response); 
     } 
    }); 
    }); 

}); 

//Google Maps part 
var map = null; 
var marker = null; 

// Google Maps 
function initialize() { 
    var startDragPosition = null; 
    var mapOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $long;?>), // Over Belgium 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map = new google.maps.Map(document.getElementById('map-big'), mapOptions); 
    // set the new marker 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $long;?>), 
    map: map, 
    draggable: true 
    }); 

    var myGeocoder = new google.maps.Geocoder(); 

    // set a callback for the start and end of dragging 
    google.maps.event.addListener(marker,'dragstart',function(event) { 
    // we remember the position from which the marker started. 
    // If the marker is dropped in an other country, we will set the marker back to this position 
    startDragPosition = marker.getPosition(); 
    }); 
    google.maps.event.addListener(marker,'dragend',function(event) { 
    // now we have to see if the country is the right country. 
    myGeocoder.geocode({'latLng': marker.getPosition()}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK && results[1]) { 
     var countryMarker = addresComponent('country', results[1], true); 

     } 
     else { 
     // geocoder didn't find anything. So let's presume the position is invalid 
     marker.setPosition(startDragPosition); 
     } 
    }); 
    }); 
} 

function addresComponent(type, geocodeResponse, shortName) { 
    for(var i=0; i < geocodeResponse.address_components.length; i++) { 
    for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) { 
     if (geocodeResponse.address_components[i].types[j] == type) { 
     if (shortName) { 
      return geocodeResponse.address_components[i].short_name; 
     } 
     else { 
      return geocodeResponse.address_components[i].long_name; 
     } 
     } 
    } 
    } 
    return ''; 
} 
</script> 

Dieser Code zu verwenden, bevor ich mit API-Schlüssel zu beginnen. Auch habe ich Google API-Code vor jquery immer noch den gleichen Fehler.

Könnte mir jemand zeigen, wie ich das beheben kann? Schätze deine Zeit.

Answer 1

Verwenden Sie nicht die Funktion initialize() auf $ (document) .ready. Entfernen Sie es. initialize() - Funktion wird automatisch aufgerufen, wenn Google API Callback sendet.

Das Dokument wird jetzt hochgeladen, hat jedoch keine Zeit, Informationen von Google API zu erhalten, und nimmt Initialisierungsfunktion auf, bevor Sie Informationen von Google erhalten.