Google Maps Integration with Vue.js

Google Maps offers powerful APIs to visualize location data and make address searching easier.
The most practical way to use this infrastructure in Vue.js projects is the vue2-google-maps library.

In this guide, we will introduce a Vue 2 based application with interactive Google Map,
We will add address autocomplete and marker.

What Will You Learn in This Guide?

• Google Maps integration into Vue.js project
• Installation and configuration of vue2-google-maps
• Address search with autocomplete
• Adding marker on the map
• Automatic retrieval of user location

---

Prerequisites

• Node.js must be installed on the computer
• Basic knowledge of Vue.js
• Google Maps API Key

For API Key:

• Create project in Google Cloud Console
• Enable Maps JavaScript API and Places API
• Generate an API key

⚠️ A billing account may be required for Google Maps API use.

---

1️⃣ Project Setup

npx @vue/cli create --default genixnode-harita-projesi
cd genixnode-harita-projesi
npm run serve

• This command creates a Vue 2 project with default settings.

---

2️⃣ vue2-google-maps Installation

npm install vue2-google-maps@0.10.7

• This package integrates Google Maps components into Vue.

---

3️⃣ Identifying the Google Maps Plugin

// src/main.js
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
import App from './App.vue'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'GOOGLE_MAPS_API_KEY',
    libraries: 'places',
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

• This structure makes the Google Maps API available throughout the application.

---

🔐 Security:

It is recommended to store the API key in the .env file.

---

4️⃣ Creating the GoogleMap Component

<!-- src/components/GoogleMap.vue -->
<template>
  <div>
    <div class="arama-kutusu">
      <h2>Konum Ara ve İşaretle</h2>
      <GmapAutocomplete @place_changed="konumSecildi" />
      <button @click="isaretle">Ekle</button>
    </div>

    <GmapMap
      :center="merkez"
      :zoom="12"
      style="width:100%; height:400px"
    >
      <GmapMarker
        v-for="(m, i) in isaretleyiciler"
        :key="i"
        :position="m.position"
        @click="merkez = m.position"
      />
    </GmapMap>
  </div>
</template>

• This structure combines autocomplete, map and marker components.

---

5️⃣ Map Logic and Location Operations

export default {
  data() {
    return {
      merkez: { lat: 41.0082, lng: 28.9784 }, // İstanbul
      mevcutKonum: null,
      isaretleyiciler: [],
    }
  },
  mounted() {
    this.konumumuBul()
  },
  methods: {
    konumSecildi(yer) {
      this.mevcutKonum = yer
    },
    isaretle() {
      if (!this.mevcutKonum) return
      const marker = {
        lat: this.mevcutKonum.geometry.location.lat(),
        lng: this.mevcutKonum.geometry.location.lng(),
      }
      this.isaretleyiciler.push({ position: marker })
      this.merkez = marker
      this.mevcutKonum = null
    },
    konumumuBul() {
      navigator.geolocation.getCurrentPosition(pos => {
        this.merkez = {
          lat: pos.coords.latitude,
          lng: pos.coords.longitude,
        }
      })
    }
  }
}

• This code gets the user location and marks the selected address on the map.

---

6️⃣ Using the Component in App.vue

<template>
  <div id="app">
    <GoogleMap />
  </div>
</template>

<script>
import GoogleMap from './components/GoogleMap.vue'

export default {
  components: &#123; GoogleMap &#125;
}
</script>

---

Frequently Asked Questions (FAQ)

1. The map is grayed out, why? The API key may be incorrect or billing may be turned off.

2. Autocomplete is not working. Check if Places API is open and libraries: 'places' is added.

3. Is it mobile compatible? Yes. It works responsively thanks to width:100%.

4. Does it work in Vue 3? No. Vue 3 requires different solutions.

---

Result

With this guide you've added fully functional Google Maps integration to your Vue.js application. Users can search for addresses, see their location and mark on the map.

You can publish such location-based applications with high performance on the GenixNode infrastructure 🚀