Googleマップv3エラー

Question

Googleマップのエラーが表示されます。「Googleは定義されていません」

私はAPIキーでGoogleマップV3を使用しています。

私は以前にAPIキーなしでGoogleマップを使用していましたが、正常に動作していました。しかし、私はAPIキーを追加した後、それは動作していないようです。

<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

あなたはスクリプトタグでcallback=initMapを呼び出すが、あなたのjavascriptのコード内の任意のinitMap機能はありません。代わりにinitialize()機能があります。 2人のうちの1人を変更する必要があると思います。