I have a Vue CLI project that uses the Google Maps JavaScript API Loader. I import the loader using the code below: After that, I defined the loader, like so: Now, when I try to display a map using the google.maps.Map object, I get an error stating that 'google' is not defined. All the code above is in the project's

‘google’ is not defined Using Google Maps JavaScript API Loader

I have a Vue CLI project that uses the Google Maps JavaScript API Loader. I import the loader using the code below:

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

After that, I defined the loader, like so:

const loader = new Loader({
  apiKey: "XXXXX",
  version: "weekly",
  libraries: ["places"]
});

Now, when I try to display a map using the google.maps.Map object, I get an error stating that ‘google’ is not defined. All the code above is in the project’s ‘main.js’ file in the ‘src’ directory and the code below is the last bit that, unfortunately, triggers the error.

loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

What am I doing wrong?

P.S. I installed @googlemaps/js-api-loader using npm, as per instructions from the Google documentation.

Answer

hi @Goodman L you have to try it. Just add window at the front of your code.. happy coding

window.google.maps.Map

Advertisement

Answer