CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Paula
Paula

Reputation: 21

Uncaught referenceError google is not defined

Please help me debug why Chrome is not recognizing google. I get this error:

Uncaught ReferenceError: google is not defined

I have moved the API script to the top, fail. I adjusted my own code to match Google's documentation, fail. Is it Chrome that is causing my problem? 

<!DOCTYPE html>
<html>
<head>
    <title>weather map</title>
    <style type="text/css">
    html, body {
        margin: 0;
    }
    #map-canvas {
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <div id="container">
        <h1>Map Test</h1>
        <div id="map-canvas">
        </div>
    </div>

    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            google.maps.event.addDomListener(window, 'load', initMap);
        });

        var map; 
        function initMap() {        
            map = new google.maps.Map(document.getElementById("map-    canvas"), {
                center: {lat: 29.423017, lng: -98.48527},
                zoom: 8,
            });
        }
    </script>
    <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_WAS_HERE_&callback=initMap">
    </script>
</body>
</html>

Upvotes: 1

Views: 3080

Answers (2)

Ziggy Verstrepen
Ziggy Verstrepen

Reputation: 103

You shouldn't put your google maps event in $(document).ready(); since window.load already registers an event listener and that should be enough.

Your google maps script tag should also be above your JavaScript code and the event listener should also be moved beneath the function.

<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_WAS_HERE_&callback=initMap">
</script>

<script type="text/javascript">
    var map; 
    function initMap() {        
        map = new google.maps.Map(document.getElementById("map-    canvas"), {
            center: {lat: 29.423017, lng: -98.48527},
            zoom: 8,
            });
        }

    google.maps.event.addDomListener(window, 'load', initMap);
</script>

Next time you should read the documentation more thoroughly.

Upvotes: 1

geocodezip
geocodezip

Reputation: 161334

You are loading the Google Maps Javascript API asynchronously. You can't use any of its methods until the initMap (callback) function runs.

working fiddle

code snippet:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map-canvas"), {
    center: {
      lat: 29.423017,
      lng: -98.48527
    },
    zoom: 8
  });
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
#map-canvas {
  width: 100%;
  height: 100%;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<div id="container" style="height:100%; width:100%;">
  <h1>Map Test</h1>
  <div id="map-canvas"></div>
</div>

Upvotes: 1

Related Questions