“谷歌未定义”错误调用谷歌地图API在Chrome

Question

我开始学习谷歌地图API。该页面正在脱机工作，但是它会在服务器上显示“谷歌未定义”。当我使用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