"google is not defined" error calling google maps api in Chrome

Question

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.

Here is the html:

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

Here is the 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

Based from this thread, check if there is an add-on that may cause the issue.

It is also stated that:

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.

Try using this:

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

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