title: Google maps v3 Error
body: <p>I'm getting a Google maps error "google is not defined" </p>
  
  <p>I'm using google maps V3 with API key Can someone point me out the issue here.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=MY-API-KEY&amp;callback=initMap"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(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 : &lt;?php echo $id;?&gt;
            },
            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(&lt;?php echo $lat;?&gt;, &lt;?php echo $long;?&gt;),  // 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(&lt;?php echo $lat;?&gt;, &lt;?php echo $long;?&gt;),
          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 &amp;&amp; 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 &lt; geocodeResponse.address_components.length; i++) {
          for (var j=0; j &lt; 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 '';
      }
  &lt;/script?
  </code></pre>