javascript - "google is not defined"在 Chrome 中调用 google map api 时出错

Question

我开始学习谷歌地图API。该页面正在离线工作，但在 Chrome 服务器上显示“google 未定义”。当我使用Firefox时，没有错误。

这是 html:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

这是 JavaScript:

    var initCenter;
    var map;
    var cityCircle;
    var centerLatLng;
    var boundsLatLng;
    var distanceBtw;
    var citymap;
    var lati,longi ;
    var path = window.location.pathname;
    var webCtx = path.substring(0, path.indexOf('/', 1));
    var pointImg= webCtx + '/front-end/ad/image/PointRed.png';

function initAutocomplete() {

   map = new google.maps.Map(document.getElementById('adMap'), {
   zoom: 10,
   zoomControl: true,
   mapTypeControl: false,
   scaleControl: true,
   streetViewControl: false,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   var input = document.getElementById('pac-input');
   var searchBox = new google.maps.places.SearchBox(input);
   map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

   map.addListener('bounds_changed', function() {
        searchBox.setBounds(map.getBounds());
    });

       map.addListener('click',function(e){
            marker.setMap(null),
            marker=null,
            marker = new google.maps.Marker({
            position: e.latLng,
            map: map,
            icon:pointImg,
            });

            cityCircle.setCenter(e.latLng);
            boundsLatLng=cityCircle.getBounds();
            map.fitBounds(boundsLatLng);
            }); 

     citymap = {
       chungyang: {
       population: 1000000
       }
     };

   for (var city in citymap) {

       cityCircle = new google.maps.Circle({
       strokeColor: '#F2A57E',
       strokeOpacity: 0.8,
       strokeWeight: 2,
       fillColor: '#F2A57E',
       fillOpacity: 0.35,
       map: map,
       center: citymap[city].center,
       radius: Math.sqrt(citymap[city].population) * adRange
     });

         cityCircle.addListener('click',function(e){
             marker.setMap(null),
             marker=null,
             marker = new google.maps.Marker({
             position: e.latLng,
             map: map,
             icon:pointImg,
             draggable: true,
             });
             cityCircle.setCenter(e.latLng);
             boundsLatLng=cityCircle.getBounds();
             map.fitBounds(boundsLatLng);
             })
          }

        searchBox.addListener('places_changed', function() {

        var places = searchBox.getPlaces();

           if (places.length == 0) {
             return;
           }

          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {

               if (place.geometry.viewport) {
               // Only geocodes have viewport.
                   bounds.union(place.geometry.viewport);
               } else {
                   bounds.extend(place.geometry.location);
               }
          });

           map.fitBounds(bounds);

        }  //searchBox.addListener

   if (navigator.geolocation) {

         navigator.geolocation.getCurrentPosition(succCallback,errCallback,{
             enableHighAccuracy:false,
             timeout:10000,
             maximumAge:0
         });

     } else {
         // alert('not support geolocation');
     }
 }

   function succCallback(e) {
   initCenter = new google.maps.LatLng(e.coords.latitude,e.coords.longitude);
     map.setCenter(initCenter);
         cityCircle.setCenter(initCenter);
         lati = e.coords.latitude;
         longi = e.coords.longitude;

                 marker = new google.maps.Marker({
                 map: map,
                 icon:pointImg,
                 position:initCenter
                 });


          $('#ad_center').val('(' + lati + ',' + longi+')');
          $('#ad_centerLati').val(lati);
          $('#ad_centerLongi').val(longi);
      }

     function errCallback(e){
       initCenter = new google.maps.LatLng(30.09108, 130.5598);
         map.setCenter(initCenter);
         cityCircle.setCenter(initCenter);

               marker = new google.maps.Marker({
               map: map,
               icon:pointImg,
               position:initCenter
               });

     }

Answer 1

基于此thread ，检查是否有可能导致该问题的附加组件。

还指出:

The new way of including GMaps on your page <script src="https://maps.googleapis.com/maps/api‌​/js" async defer></script> will cause issues, as its loading will be deferred so as not to be a blocking resource. This has the awkward possibility that other scripts will be included before GMaps is initialized.

尝试使用这个:

<script src="http://maps.googleapis.com/maps/api/js"></script> 

来源:https://github.com/googlemaps/v3-utility-library/blob/master/canvaslayer/examples/hello2d.html