Embedding Google Maps

In this second part, we are going to add a map to the home page and control it through the Vuex store.

Installation

To integrate Google Maps, we will need an API and a third-party package called vue-googlemaps.

Getting the API key

To use Google Maps in our app, we need to enable the corresponding API and generate an API key:

1. In the Google Developers Console, go back to the APIs & services|Library and click on Google Maps JavaScript API under the Google Maps APIs section. On the API page, click on the Enable button.
2. Then go to Credentials and create a new API key.

Installing the library

We will now install the vue-googlemaps library, which will help us integrate Google Maps into our app.

1. In the app, install the vue-googlemaps package with the following command:

      npm i -S vue-googlemaps

2. In the main main.js file, you can enable it in the app with the API key from Google:

      import VueGoogleMaps from 'vue-googlemaps'

Vue.use(VueGoogleMaps, {
load: {
          apiKey: ...