How to Embed Google Maps in a Nuxt Project demo repo

Vue Google Maps is a Google maps component for vue with 2-way data binding.

🔑 Get API Key

  1. Get an API key from the Google Maps Platform. Click Get Started.

  2. Pick a product Pick product

  3. Select a project Select project

  4. Create a billing account Create billing account

  5. Accept the terms of service Accept terms

  6. Create a payment profile Create payment profile

  7. Enable the API Enable API

  8. Get the API key Get API key

👣 Steps

  1. Create a Nuxt project and install dotenv and Vue Google Maps.
npx create-nuxt-app nuxt-demo
cd nuxt-demo
npm i -D @nuxtjs/dotenv
npm i vue2-google-maps
  1. Create a file named .env in the project root and paste your API key, e.g.:
VUE_APP_GOOGLE_MAPS_API_KEY=ABcdEfGhIjklmNOpqrsTUvWXyzAbcD1EfGhiJKl
  1. Create Google Maps plugin in plugins/google-maps.js.
import Vue from "vue";

import * as VueGoogleMaps from "@/node_modules/vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: { key: process.env.VUE_APP_GOOGLE_MAPS_API_KEY }
});
  1. Register the plugin in nuxt.config.js.
export default {
  env: {
    VUE_APP_GOOGLE_MAPS_API_KEY: process.env.VUE_APP_GOOGLE_MAPS_API_KEY
  },
  modules: ["@nuxtjs/dotenv"],
  plugins: ["@/plugins/google-maps"]
};
  1. Use Vue Google Maps, e.g. in pages/google-maps.vue.
<template>
  <div>
    <h1>Google Maps Demo</h1>

    <gmap-map :center="center" :map-type-id="mapTypeId" :zoom="5">
      <gmap-marker
        v-for="(item, index) in markers"
        :key="index"
        :position="item.position"
        @click="center = item.position"
      />
    </gmap-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: { lat: -3.350235, lng: 111.995865 },
      mapTypeId: "terrain",
      markers: [
        { position: { lat: -0.48585, lng: 117.1466 } },
        { position: { lat: -6.9127778, lng: 107.6205556 } }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.vue-map-container {
  height: 450px;
  max-width: 992px;
  width: 100%;
}
</style>

📖 Explanation

  • Specify the map center with center.
  • To make the map zoomed in, increase the zoom value.
  • Available map types for map-type-id:
    • roadmap
    • hybrid
    • satellite
    • terrain
  • Put markers in many locations with gmap-marker.
Last updated: 7/3/2019, 1:39:42 AM