How to Embed Google Maps in a Vue 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 Vue project and install dotenv and Vue Google Maps.
npm i -g @vue/cli
vue create vue-demo
cd vue-demo
npm i -D 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. Register Vue Charts in src/main.js.
require("dotenv").config();

import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(VueGoogleMaps, {
  load: { key: process.env.VUE_APP_GOOGLE_MAPS_API_KEY }
});
  1. Use Vue Google Maps, e.g. in src/views/google-maps.vue.
<template>
  <div>
    <h1>Google Maps Demo</h1>

    <GmapMap :center="center" :map-type-id="mapTypeId" :zoom="5">
      <GmapMarker
        v-for="(item, index) in markers"
        :key="index"
        :position="item.position"
        @click="center = item.position"
      />
    </GmapMap>
  </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: 6/21/2019, 2:32:45 AM