Uncaught ReferenceError: google is not defined

Question

Hello,

I am working on a website project and not being able to find a solution to the below mentioned problem. The chrome browser is identified the following error : Uncaught ReferenceError: google is not defined.

Not only is there a browser error nor is the google map and the overlay image being displayed. But first I need to find a solution to the browser error.

Here are the solutions I have tried : 1) Adding an addDomListener() static method in the script which calls the Google Maps API. I am not sure if the arguments I have passed are correct. 2) Placing the script that calls the Google Maps API before the rest of Javascript code.

Any help will be appreciated.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Dark Sky Map</title>

  </head>

  <body>
    <div id="lightpollutionmap" ></div>


    <!-- Code that pulls data from NASA GIBS server and adds to map -->
    <script type="text/javascript">


      // Set custom overlay object prototype to new instance of OverlayView
      var overlay;
      var lightpollutionoverlay = {};
      lightpollutionoverlay.prototype = new google.maps.OverlayView();


      // Initialize the map
      var initialmap;

      function initMap() {
      initialmap = new google.maps.Map(document.getElementById('lightpollutionmap'), {
      center: {lat: 47.0810, lng: 2.3987},
      zoom: 6
      });
      }


      var bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-90, -180),
        new google.maps.LatLng(90, 180));

      // Search night pollution image from NASA GIBS server
      var srcImage = 'https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/VIIRS_Black_Marble/default/2018-06-30/GoogleMapsCompatible_Level13/13/13/36.png';

      // custom lightpollutionoverlay object contains the night pollution image
      // bounds of image and reference to initialmap
      overlay = new lightpollutionoverlay(bounds, srcImage, initialmap);

      // @constructor
      function Lightpollutionoverlay(bounds, srcImage, initialmap) {

      // initialize passed parameters as properties of the new object.
      this.bounds_ = bounds;
      this.image_ = srcImage;
      this.map_ = initialmap;

      // Define a property to hold the image's div. We'll
      // actually create this div upon receipt of the onAdd()
      // method so we'll leave it null for now.
      this.div_ = null;

      // Explicitly call setMap on this overlay.
      this.setMap(initialmap);
      }

      // Implement onAdd method to initialize the overlay DOM elements.
      lightpollutionoverlay.prototype.onAdd = function() {

      // creation of div to hold NASA GIBS night pollution image
      var div = document.createElement('div');

      // Create the img element and attach it to the div.
      var img = document.createElement('srcImage');
      img.src = this.image_;
      img.style.width = '100%';
      img.style.height = '100%';
      img.style.position = 'absolute';
      div.appendChild(srcImage);

      // Define a property to hold the image's div
      this.div_ = div;

      // Add the element to the "overlayLayer" pane.
      var panes = this.getPanes();
      panes.overlayLayer.appendChild(div);
      };

      // Implement draw method to draw overlay on the map
      lightpollutionoverlay.prototype.draw = function() {

      // We use the south-west and north-east
      // coordinates of the overlay to peg it to the correct position and size.
      // To do this, we need to retrieve the projection from the overlay.
      var overlayProjection = this.getProjection();

      // Retrieve the south-west and north-east coordinates of this overlay
      // in LatLngs and convert them to pixel coordinates.
      // We'll use these coordinates to resize the div.
      var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
      var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

      // Resize the image's div to fit the indicated dimensions.
      var div = this.div_;
      div.style.left = sw.x + 'px';
      div.style.top = ne.y + 'px';
      div.style.width = (ne.x - sw.x) + 'px';
      div.style.height = (sw.y - ne.y) + 'px';
      };

    </script>

    <!-- script that looks for map on Google's API server -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=[Insert API Key Here]&callback=initMap">
    google.maps.event.addDOMListener(window, 'load', initMap);
    </script>


  </body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Sujay PATIL

Sujay PATIL

Uncaught ReferenceError: google is not defined