Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Courses Plus Student 1,869 Points

Uncaught ReferenceError: google is not defined


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">
    <!-- 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>


    <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.

      // 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';

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

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

      // 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 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);