title: "google is not defined" error calling google maps api in Chrome
body: <p>I'm starting to learn google map API. The page is working offline, but it shows "google is not defined" on server with Chrome. When I use Firefox, there is no error.</p>
  
  <p>Here is the html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&amp;libraries=places&amp;callback=initAutocomplete" async defer&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is the javascript:</p>
  
  <pre class="lang-js prettyprint-override"><code>    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
                 });
  
       }
  </code></pre>