Error explanation

As we discussed in 🗺️ Creating a New Google Map, it’s customary to provide a callback URL parameter in the initialization script:

< script async defer src="https://.../api/js?key=Aiza...&callback=initMap"></script>

The callback parameter ensures that the application logic where you call google.maps.XYZ is only run when the global window.google is properly initialized.

If window.google isn’t initialized just yet, it’s undefined. Thus, calling window.google.maps.XYZ is interpreted as undefined.maps which errors out and prints the message “Cannot read property 'maps' of undefined.”

Likely causes

You are likely:

instantiating Google Maps classes like new google.maps.Map(...) or new google.maps.Marker(...)
or defining constants like const center = new google.maps.LatLng({...})

before google.maps is fully initialized.

https://tally.so/r/w2a2jM

Solutions

A) Use dynamic loading

To load Google Maps on-demand and without a <script> tag, install @googlemaps/js-api-loader and run:

import { Loader } from "@googlemaps/js-api-loader"

const loader = new Loader({
  apiKey: "Aiza",
  version: "weekly",
  // ... additional options
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 42, lng: 42 },
    zoom: 16,
  });
});

<aside> 💡 Notice how you don’t call google.maps.Map directly but rather asynchronously import the Map library and go from there. As such, the “Cannot read property 'maps' of undefined” error cannot possibly happen.

</aside>