Vue.js ile Google Haritalar (Google Maps) Entegrasyonu

Google Haritalar, konum verilerini görselleştirmek ve adres aramayı kolaylaştırmak için güçlü API’ler sunar.
Vue.js projelerinde bu altyapıyı kullanmanın en pratik yolu vue2-google-maps kütüphanesidir.

Bu rehberde Vue 2 tabanlı bir uygulamaya interaktif Google Haritası,
adres otomatik tamamlama (autocomplete) ve marker (işaretleyici) ekleyeceğiz.

---

Bu Rehberde Ne Öğreneceksiniz?

• Vue.js projesine Google Maps entegrasyonu
• vue2-google-maps kurulumu ve yapılandırması
• Autocomplete ile adres arama
• Harita üzerinde marker ekleme
• Kullanıcı konumunu otomatik alma

---

Ön Gereksinimler

• Bilgisayarda Node.js kurulu olmalı
• Temel Vue.js bilgisi
• Google Maps API Anahtarı

API Anahtarı için:

• Google Cloud Console’da proje oluşturun
• Maps JavaScript API ve Places API’yi etkinleştirin
• Bir API anahtarı üretin

⚠️ Google Maps API kullanımı için faturalandırma hesabı gerekebilir.

---

1️⃣ Proje Kurulumu

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

• Bu komut varsayılan ayarlarla Vue 2 projesi oluşturur.

---

2️⃣ vue2-google-maps Kurulumu

npm install [email protected]

• Bu paket Google Maps bileşenlerini Vue içine entegre eder.

---

3️⃣ Google Maps Eklentisini Tanımlama

// 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')

• Bu yapı Google Maps API’yi tüm uygulamada kullanılabilir hale getirir.

---

🔐 Güvenlik:

API anahtarını .env dosyasında saklamanız önerilir.

---

4️⃣ GoogleMap Bileşenini Oluşturma

<!-- 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>

• Bu yapı autocomplete, harita ve marker bileşenlerini bir araya getirir.

---

5️⃣ Harita Mantığı ve Konum İşlemleri

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,
        }
      })
    }
  }
}

• Bu kod kullanıcı konumunu alır ve seçilen adresi haritaya işaretler.

---

6️⃣ Bileşeni App.vue İçinde Kullanma

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

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

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

---

Sıkça Sorulan Sorular (SSS)

1. Harita gri görünüyor, neden? API anahtarı hatalı veya faturalandırma kapalı olabilir.

2. Autocomplete çalışmıyor. Places API açık mı ve libraries: 'places' ekli mi kontrol edin.

3. Mobil uyumlu mu? Evet. width:100% sayesinde responsive çalışır.

4. Vue 3’te çalışır mı? Hayır. Vue 3 için farklı çözümler gerekir.

---

Sonuç

Bu rehberle Vue.js uygulamanıza tam fonksiyonel Google Maps entegrasyonu eklediniz. Kullanıcılar adres arayabilir, konumlarını görebilir ve harita üzerinde işaretleme yapabilir.

Bu tür konum tabanlı uygulamaları Rabisu Bulut altyapısında yüksek performansla yayına alabilirsiniz 🚀