0
163
ViewsCannot read property of undefined (reading maps)
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.
3 answers
Answer question0
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.
0
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.
0
At some point this thing is undefind, so my recomendation is to put qm(?) after window.google,
var service = new window.google?.maps.DistanceMatrixService();