Sometimes, we want to add Google Maps in Vue.js.

In this article, we’ll look at how to add Google Maps in Vue.js.

How to add Google Maps in Vue.js?

To add Google Maps in Vue.js, we can use the google-maps package.

To install it, we run

npm i google-maps

Then we use it by writing

<template>
  <section>
    <div ref="map"></div>
  </section>
</template>

<script>
import GoogleMapsLoader from "google-maps";

export default {
  //...
  mounted() {
    GoogleMapsLoader.load((google) => {
      const map = new google.maps.Map(this.$refs.map, {
        zoom: 15,
        center: position,
      });
    });
  },
};
</script>

to assign a ref to the div.

And then we call GoogleMapsLoader.load with a callback which populates the div with the Google Map content with the google.maps.Map constructor called with the map ref and an object with some map options.

Conclusion

To add Google Maps in Vue.js, we can use the google-maps package.