Google is not defined despite there already being an API keyed in

Question

I have no idea why it keeps saying google is not defined. Does anyone know the problem?

I already tried moving the script to the head and all but here is still no use.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });
      }
      // Loop through the results array and place a marker for each
      // set of coordinates.
      function loop() {
        var lati=JSON.parse(localStorage.getItem("lat2"))
        console.log("Hi")
        console.log(lati)
        for (var i = 0; i < lati.length; i++) {
          var coords = lati[i]
          var latLng = {lat: (coords[0]), lng:(coords[1])};
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
      loop()
    </script>
    <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key=THEAPIKEY=initMap">
    </script>
  </body>
</html>

I wanted it to loop thru what I have in my local storage

Ludovit Mydla · Answer 1 · 2019-02-09T13:10:29.263

0

No.1) Your browser doesn't know what google is, because google variable will be defined in later script. Place your <script> with initMap functions etc. after the "google" script <script async defer src="https://maps.googleapis.com/maps/api/js key=....&callback=initMap"> </script>.

No.2) It might be beneficial to run your code after the page is completely loaded. You can use document.addEventListener('DOMContentLoaded', function() { //your code here }) or use libraries like jQuery to do it.

P.S. Be more careful with your API keys in general. Don't publish them

edited Feb 09 '19 at 13:10

answered Feb 09 '19 at 13:02

Ludovit Mydla

802
9
17

I've added to the answer. You are basically dealing with [delayed execution of Google javascript](https://stackoverflow.com/questions/36909380/why-use-defer-with-google-maps-javascript) and your own code must run some time later. – Ludovit Mydla Feb 09 '19 at 13:12
If you use `callback=initMap` then you (probably) don't need what you described in point 2). Publishing an API key is also not an issue if the key is restricted properly. It can be found anyway on any website using the Google Maps API by viewing the source code. That's why you should always restrict your keys. – MrUpsidown Feb 09 '19 at 13:59

score 0 · Accepted Answer · answered Feb 09 '19 at 17:20

You are loading the Google Maps Javascript API asynchronously (with async defer). The API won't be available (google will be undefined) until it finishes loading. At that time it will run your callback function (initMap).

Descriptions in the API documentation:

Move the loop function call inside initMap (or load the API synchronously).

proof of concept fiddle

code snippet: (note won't read localStorage due to sandboxing)

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(2.8, -187.3),
      mapTypeId: 'terrain'
    });
    loop()
  }

  // Loop through the results array and place a marker for each
  // set of coordinates.
  function loop() {
    var lati = JSON.parse(localStorage.getItem("lat2"))
    console.log("Hi")
    console.log(lati)
    for (var i = 0; i < lati.length; i++) {
      var coords = lati[i]
      var latLng = {
        lat: (coords[0]),
        lng: (coords[1])
      };
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Google is not defined despite there already being an API keyed in

2 Answers2