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:


# Prerequisites

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


1. Knowledge on [Vue.js](https://vuejs.org/)/[Nuxt.js](https://nuxtjs.org/)
2. [Google Maps API](https://developers.google.com/maps)


# Getting Google Maps API Key

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


1. Log in to the [G](https://console.cloud.google.com)[oogle Cloud Console](https://console.cloud.google.com) (We need to sign in with a Google Account)

![](https://cloudinary-marketing-res.cloudinary.com/image/upload/media_jams/s_933EE35A037421972A46B849468BDF1E69566A33AAFF9864D8547A84E344F1E7_1650292268315_google-console.png "thumb:c_limit,w_2000/f_auto/q_auto, with_code:false, popup:false")

2. 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.
3. Next, click on the **APIs & Services > Credentials**.
![](https://cloudinary-marketing-res.cloudinary.com/image/upload/media_jams/s_933EE35A037421972A46B849468BDF1E69566A33AAFF9864D8547A84E344F1E7_1650292758805_credentials.png "thumb:c_limit,w_2000/f_auto/q_auto, with_code:false, popup:false")
4. Click on **Create Credentials**, then on the **API key**
5. Copy and save the API key from the model dialog that has just appeared on our screen

![](https://cloudinary-marketing-res.cloudinary.com/image/upload/media_jams/s_933EE35A037421972A46B849468BDF1E69566A33AAFF9864D8547A84E344F1E7_1650293182860_Untitled+design.png "thumb:c_limit,w_2000/f_auto/q_auto, with_code:false, popup:false")

6. 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):

npx create-nuxt-app


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](https://www.npmjs.com/package/vue2-google-maps)

To install the package, run the script:

npm 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:

plugins: [{ 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:

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


## 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:


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

“`

Then embed the map using:

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

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

methods: {
    initMarker(loc) {
      this.existingPlace = loc;
    },
    addLocationMarker() {
      if (this.existingPlace) {
        const marker = {
          lat: this.existingPlace.geometry.location.lat(),
          lng: this.existingPlace.geometry.location.lng(),
        };
        this.locationMarkers.push({ position: marker });
        this.locPlaces.push(this.existingPlace);
        this.center = marker;
        this.existingPlace = null;
      }
    },
    locateGeoLocation: function () {
      navigator.geolocation.getCurrentPosition((res) => {
        this.center = {
          lat: res.coords.latitude,
          lng: res.coords.longitude,
        };
      });
    },
  },

Run the project to see the changes: