Home understanding the error message: Uncaught (in promise) ReferenceError: google is not defined at initMap

Questions

understanding the error message: Uncaught (in promise) ReferenceError: google is not defined at initMap

July 28, 2023

Hello I am very new to Javascript. I am working on a personal project and using the Google API for Javascript maps and markers. I was following example through Google’s documentation and for some reason I am getting "Uncaught (in promise) ReferenceError: google is not defined at initMap" error message on the console. The map and code works fine.

I want to ask what was wrong with my code for this to happen?

here is my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trail Locator</title>
    <link rel="stylesheet" href="style.css" >
    <script src="script.js"></script>
</head>
<body>
    <h1>Static Map preview</h1>
    <div id="map"></div>
    
      <script async
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNyQGZ4tzTaxvFekb0gsksLcqytVms-kM&callback=initMap">
      </script>
</body>
</html>

here is my Javascript code:

// Initialize and add the map
let map;

async function initMap() {

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  getLocation();
  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 15,
    center: position,
    mapId: "b003ec40387a4e50",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  var pos = new google.maps.LatLng(lat, lng)
  map.setCenter(pos);
  let marker = new google.maps.Marker({
    position: pos,
    map: map,
    title: "current position"
  })
}

initMap();

I may be not too familiar with JavaScript or Asynchronous functions. I had done some research and, correct me if I am wrong, ReferenceError happens when library was not initialized before a function was called.

In my case, the google library should be initialized first for this function to work through the google API. I have included this in my HTML as:

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

The error points to the code:
const { Map } = await google.maps.importLibrary("maps");

Am i wrong with this?

>Solution :

The Maps JavaScript API Documentation states the following.

When the script is executed, it will call the function specified using the callback parameter.

In your case, the function initMap is the callback function. So when the API is loaded, google calls your initMap function.

The reason why you’re getting the error, is because you’re calling the initMap function yourself, before the maps API is loaded. Removing the last line of your JavaScript code (initMap()) will resolve the error.