Google Maps JS: Uncaught TypeError: Cannot call method 'addDomListener' of undefined

Question

I'm getting the " Cannot call method 'addDomListener' of undefined " error with the google.maps.event.addDomListener(window, 'load', initialize); code line, where event is 'undefined'. My code below is basically copied from an example on developer.google.com.

$(function () {
   var officeMap = $("#map-canvas");
   if (officeMap.length > 0) {
      var map;
      function initialize()  {
         var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644), zoom: 8 
         };
         map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
   }
});

The google maps script (with API key) is loaded before this at the end of the document body (using Modernizr), looking like this: " https://maps.googleapis.com/maps/api/js?key=myApiKey&sensor=false " (I switch "myApiKey" with generate key ofc :))

Does the error indicate that the Google Maps script didn't load first? Or is my API-key invalid? Or something else?

Answer 1

The google code sample is correct, but not going to run in most website given there is ajax script loading involve. And yes you are right the google script is not loaded at the point when you call the function.

Take a look at the source of that google script, it is not the full javascript sdk, it is just a proxy/starter file. I remember it is not like this last time when those sample code works without problem.

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
 <script>

function initialize() {
   var officeMap = $("#map-canvas");
   if (officeMap.length > 0) {
      var map;

         var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644), zoom: 8 
         };
         map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

   }
}
 </script>

Answer 2

Try using this instead of your key

<script type="text/javascript"      src="https://maps.googleapis.com/maps/api/js?sensor=false">

My code

var myCenter=new google.maps.LatLng(-34.397, 150.644);

        function initialize()
        {
        var mapProp = {
          center:myCenter,
          zoom:8,
          mapTypeId:google.maps.MapTypeId.ROADMAP
          };

        var map=new google.maps.Map(document.getElementById('maparea'),mapProp);

        var marker=new google.maps.Marker({
          position:myCenter,
          title:'Hi'
          });

        marker.setMap(map);

        var infowindow = new google.maps.InfoWindow({
          content:'',
          boxStyle: {
                  maxHeight:200
                }
          });

        infowindow.open(map,marker);
        }

        google.maps.event.addDomListener(window, 'load', initialize);