'google' is not defined Using Google Maps JavaScript API Loader

Question

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.

Hi @Goodman L I got the same problem as you. You was solve it? — kurakura
– kurakura, Commented Mar 9, 2021 at 8:41
Please comment on this issue if you would like the promise to resolve to window.google or window.google.maps. github.com/googlemaps/js-api-loader/issues/224 — Justin Poehnelt
– Justin Poehnelt, Commented Apr 15, 2021 at 5:17

tony19 · Accepted Answer · 2022-07-15 04:24:39Z

6

The new package does not return a 'google' object when the promise is resolved, instead it is attached to the window. To use it as you would if following the Vue tutorial (that I am also following) you would need to add:

this.google = window.google

To the map component. For clarity:

async mounted() {
   // As per the documentation for the google maps API loader
   const googleMapApi = await Loader({
       apiKey: this.apiKey
    })

    // This returns a promise, but not a 'google' object
    this.google = await googleMapApi.load();
    // Set the google object from the correct location
    this.google = window.google;
    this.initializeMap();
},

methods: {
    initializeMap() {
        const mapContainer = this.$refs.googleMap;
        this.map = new this.google.maps.Map(mapContainer, this.mapConfig);
    }
}

The reference to the tutorial I talk about: https://v2.vuejs.org/v2/cookbook/practical-use-of-scoped-slots.html

edited Jul 15, 2022 at 4:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 2, 2021 at 6:42

Daniel Bernal

3343 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Justin Poehnelt Over a year ago

Please comment on this issue if you would like the promise to resolve to window.google or window.google.maps. github.com/googlemaps/js-api-loader/issues/224

Tichel Over a year ago

this sorted things out for me

Tichel Over a year ago

I followed the same example had to change 'await googleMapApi' in new 'googleMapApi'

kurakura · Accepted Answer · 2021-03-10 01:17:56Z

3

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

window.google.maps.Map

answered Mar 10, 2021 at 1:17

kurakura

1861 silver badge18 bronze badges

4 Comments

Goodman L Over a year ago

Hi. Sorry, I am only getting back to you now. I have tried your solutions and it does not give errors. However, there is no map showing. I have double-checked the coordinates and API keys and everything is in order.

kurakura Over a year ago

I think you should read the documentation

Goodman L Over a year ago

That is where I started. I can see that something is being done to the element I provided in the promise but no map is being displayed. I will keep checking. Thank you.

Goodman L Over a year ago

I wasn't seeing the map after making the changes you suggested because my container did not have a height attribute. Now it does and the map is displaying. Thank you very much.

tony19 · Accepted Answer · 2022-07-15 02:40:16Z

0

Let’s first establish our GoogleMapLoader.vue template:

<template>
  <div>
    <div class="google-map" ref="googleMap"></div>
    <template v-if="Boolean(this.google) && Boolean(this.map)">
      <slot
        :google="google"
        :map="map"
      />
    </template>
  </div>
</template>

Now, our script needs to pass some props to the component which allows us to set the Google Maps API and Map object:

import GoogleMapsApiLoader from 'google-maps-api-loader'

export default {
  props: {
    mapConfig: Object,
    apiKey: String,
  },

  data() {
    return {
      google: null,
      map: null
    }
  },

  async mounted() {
    const googleMapApi = await GoogleMapsApiLoader({
      apiKey: this.apiKey
    })
    this.google = googleMapApi
    this.initializeMap()
  },

  methods: {
    initializeMap() {
      const mapContainer = this.$refs.googleMap
      this.map = new this.google.maps.Map(
        mapContainer, this.mapConfig
      )
    }
  }
}

Please follow this tutorial for the correct way to do it.

https://v2.vuejs.org/v2/cookbook/practical-use-of-scoped-slots.html

edited Jul 15, 2022 at 2:40

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 26, 2021 at 17:27

Hassen Ch.

1,8331 gold badge21 silver badges32 bronze badges

2 Comments

Goodman L Over a year ago

I see you have used a different package from the one I am using. Let me try it then revert.

Goodman L Over a year ago

So, google-maps-api-loader has been deprecated and @googlemaps/js-api-loader is suggested instead. That's what I am using and facing issues with. See: npmjs.com/package/google-maps-api-loader

Ardee Aram · Accepted Answer · 2024-06-20 04:57:10Z

0

The google variable can be accessed as the first callback parameter, like so:

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

Alternatively, you can use async/await syntax like so:

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

Reference: https://www.npmjs.com/package/@googlemaps/js-api-loader

answered Jun 20, 2024 at 4:57

Ardee Aram

4,7999 gold badges38 silver badges37 bronze badges

Collectives™ on Stack Overflow

'google' is not defined Using Google Maps JavaScript API Loader

4 Answers 4

3 Comments

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related