Google Maps provides several APIs to enhance location functionalities in our applications. This post will take us through the steps of using Google Maps in a Nuxt.js project.

Demo

A complete demo of the project is available on GitHub:

https://github.com/achingachris/nuxt-google-maps-demo

A live demo is available on CodeSandbox:

1<CodeSandbox id="nuxt-google-maps" title="Embedding Google Maps in Nuxt.js" />

Prerequisites

To accomplish this, we should have basic knowledge of the following.

Knowledge on Vue.js/Nuxt.js
Google Maps API

Getting Google Maps API Key

The following is a breakdown of getting the Google Maps API key:

We need to have a project for the next steps. To create one, click on the projects menu on the top left of the page.
Next, click on the APIs & Services > Credentials.
Click on Create Credentials, then on the API key
Copy and save the API key from the model dialog that has just appeared on our screen

On the Credentials page, head over to `Enable APIs and Services to enable:
- Places API
- Maps JavaScript API

Setting Up Nuxt.js

To start a new Nuxt.js project, run the following on a terminal/Command Prompt(CMD):

1npx create-nuxt-app <project-name>

Note: Replace <project-name> with a project name

Embedding Google Maps

To use Google Maps in our Nuxt.js project, we will use the Node.js package, vue2-google-maps

To install the package, run the script:

1npm i vue2-google-maps

Next, we need to register vue2-google-maps as a plugin. Inside the nuxt.config.js file, update the plugins to:

1plugins: [{ src: "~/plugins/google-maps.js" }],

Then create a plugins folder, and inside it, create a file called google-maps.js. Add the following inside the file:

1import Vue from "vue";
2    import * as VueGoogleMaps from "vue2-google-maps"; // Import package
3    Vue.config.productionTip = false;
4    Vue.use(VueGoogleMaps, {
5      load: {
6        key: "GOOGLE MAPS API KEY HERE",
7        libraries: "places",
8      },
9    });

Note:

Replace the GOOGLE MAPS API KEY HERE with an actual API key.

Create a new component, GoogleMap.vue, and update it with the following code:

1<template>
2  <div class="container">
3    <div>
4      <h2 class="text-center">Google Map Nuxt.js</h2>
5      <label class="form-label">
6        <gmap-autocomplete @place_changed="initMarker"></gmap-autocomplete>
7        <button @click="addLocationMarker" class="btn btn-primary">Get Location</button>
8      </label>
9      <br />
10    </div>
11    <br />
12    <gmap-map :zoom="14" :center="center" style="width: 100%; height: 600px" class="mb-5">
13      <gmap-marker
14        :key="index"
15        v-for="(m, index) in locationMarkers"
16        :position="m.position"
17        @click="center = m.position"
18      ></gmap-marker>
19    </gmap-map>
20  </div>
21</template>
22
23<script>
24export default {
25  name: "GoogleMap",
26  data() {
27    return {
28      center: {
29        lat: 39.7837304,
30        lng: -100.4458825,
31      },
32      locationMarkers: [],
33      locPlaces: [],
34      existingPlace: null,
35    };
36  },
37
38  mounted() {
39    this.locateGeoLocation();
40  },
41
42  methods: {
43    initMarker(loc) {
44      this.existingPlace = loc;
45    },
46    addLocationMarker() {
47      if (this.existingPlace) {
48        const marker = {
49          lat: this.existingPlace.geometry.location.lat(),
50          lng: this.existingPlace.geometry.location.lng(),
51        };
52        this.locationMarkers.push({ position: marker });
53        this.locPlaces.push(this.existingPlace);
54        this.center = marker;
55        this.existingPlace = null;
56      }
57    },
58    locateGeoLocation: function () {
59      navigator.geolocation.getCurrentPosition((res) => {
60        this.center = {
61          lat: res.coords.latitude,
62          lng: res.coords.longitude,
63        };
64      });
65    },
66  },
67};
68</script>

In the above snippet, we created a form to search for locations:

1<label class="form-label">
2     <gmap-autocomplete @place_changed="initMarker"></gmap-autocomplete>
3     <button @click="addLocationMarker" class="btn btn-primary">
4         Get Location 
5      </button>
6 </label>

Then embed the map using:

1<gmap-map :zoom="14" :center="center" style="width: 100%; height: 600px" class="mb-5">
2    <gmap-marker
3        :key="index"
4        v-for="(m, index) in locationMarkers"
5        :position="m.position"
6        @click="center = m.position"
7        >
8    </gmap-marker>
9</gmap-map>

To enable the location features to work, we added addLocationMarker() function and locateGeoLocation() for geolocation.

1methods: {
2    initMarker(loc) {
3      this.existingPlace = loc;
4    },
5    addLocationMarker() {
6      if (this.existingPlace) {
7        const marker = {
8          lat: this.existingPlace.geometry.location.lat(),
9          lng: this.existingPlace.geometry.location.lng(),
10        };
11        this.locationMarkers.push({ position: marker });
12        this.locPlaces.push(this.existingPlace);
13        this.center = marker;
14        this.existingPlace = null;
15      }
16    },
17    locateGeoLocation: function () {
18      navigator.geolocation.getCurrentPosition((res) => {
19        this.center = {
20          lat: res.coords.latitude,
21          lng: res.coords.longitude,
22        };
23      });
24    },
25  },

Run the project to see the changes:

1npm run dev

Load the page on a browser, use the URL http://localhost:3000/:

Conclusion

The post demonstrates how to integrate Google Maps into a Nuxt.js project

Useful resources:

- Using Google Maps API

Vue2-google-maps

Embed Google Maps in a NuxtJS Project