Google Maps v3错误

Question

I'm getting a Google maps error "google is not defined"

I'm using google maps V3 with API key Can someone point me out the issue here.

I was using google maps without API key before and it was working fine. But after i add the API key it doesn't seems to be working.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY-API-KEY&callback=initMap"></script>

<script>
    $(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);
          }
        });
      });

    });




    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?

Answer 1

You call callback=initMap in the script tag but there isn't any initMap function in your javascript code. Instead there is a initialize() function. I suppose you should change one of the two