Cannot read property of undefined (reading maps)

Question

I wanted to take the distance between multiple points with Google's DinstanceMatrixService, and I get the following error:

I used google.maps... multiple times and it gave me the error about google being undefined. I searched on internet and found that if I type window in front of the google.maps... it should work, but it doesn't

function calculate_furthest_point() {
  var origin1 = new window.google.maps.LatLng(46.754516, 23.596608);
  var origin2 = new window.google.maps.LatLng(46.753906, 23.582223);
  var destinationA = new window.google.maps.LatLng(46.751362, 23.594867);
  var destinationB = new window.google.maps.LatLng(46.754986, 23.592378);

  var service = new window.google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: [origin1, origin2],
      destinations: [destinationA, destinationB],
      travelMode: "DRIVING",
      transitOptions: TransitOptions,
      drivingOptions: DrivingOptions,
      unitSystem: UnitSystem,
      avoidHighways: Boolean,
      avoidTolls: Boolean,
    },
    callback
  );

  // callback()

  function callback(response, status) {
    if (status == "OK") {
      var origins = response.originAddresses;
      var destinations = response.destinationAddresses;

      for (var i = 0; i < origins.length; i++) {
        var results = response.rows[i].elements;
        for (var j = 0; j < results.length; j++) {
          var element = results[j];
          var distance = element.distance.text;
          var duration = element.duration.text;
          var from = origins[i];
          var to = destinations[j];
          console.log(
            "DISTANCE : " + distance + " FROM: " + from + " TO: " + to
          );
        }
      }
    } else console.log("ERROR");
  }
}

and my imports:

import logo from "./logo.svg";
import "./App.css";
import {
  GoogleMap,
  useLoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";
import { useEffect } from "react";

import { initializeApp } from "firebase/app";
import {
  getDatabase,
  ref,
  set,
  onValue,
  get,
  child,
  database,
  DataSnapshot,
} from "firebase/database";

I am using react-google-maps.

score 1 · Answer 1 · answered Jan 12 '22 at 12:11

1

Maibe you need load event before use window.google.

From the doc : if you need an access to map object, instead of ref prop, you need to use onLoad callback on component.

https://www.npmjs.com/package/@react-google-maps/api

answered Jan 12 '22 at 12:11

Mino mnz

181
1
4

score 1 · Answer 2 · answered Jan 12 '22 at 12:12

1

At some point this thing is undefind, so my recomendation is to put qm(?) after window.google, var service = new window.google?.maps.DistanceMatrixService();

answered Jan 12 '22 at 12:12

Dobromir Kirov

934
4
16

if I add the `?`, I get the following error: `Constructors in/after an Optional Chain are not allowed.` and it is refferring to the `()` in the `window.googl?e.maps.DistanceMatrixService()` – Alec Jan 12 '22 at 12:24
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 12 '22 at 13:09
FROM THE DOCS: If you want to use window.google object, you need to extract GoogleMap in separate module, so it is lazy executed then google-maps-api script is loaded and executed by . If you try to use window.google before it is loaded it will be undefined and you'll get a TypeError. – Dobromir Kirov Jan 12 '22 at 13:23

score 0 · Answer 3 · answered Jan 12 '22 at 12:11

If you use the library in your module as an import, you will not be able to access to window.google. If you call your function calculate_furthest_point outside the module you should add the Google Map script in your <head> tag:

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

Otherwise you should import and use methods from @react-google-maps package.

Cannot read property of undefined (reading maps)

3 Answers3