Google Harita (Google Maps) ekleme işlemleri

Google Harita (Google Maps) ekleme işlemleri hakkında detaylı bilgi vereyim. Web sitesine, uygulamaya ve diğer platformlara Google Maps entegrasyonu için güncel yöntemleri araştırayım.
# Google Harita Ekleme: Web Sitesine ve Uygulamalara Entegrasyon Rehberi

Google Maps entegrasyonu, işletmelerin fiziksel konumlarını müşterilerine göstermesi için en etkili yöntemdir. Bu rehberde, web sitelerine ve uygulamalara Google Harita ekleme yöntemlerini, API entegrasyonunu ve en iyi uygulamaları detaylı olarak ele alacağız.

1. Basit iframe ile Google Harita Ekleme (Kod Bilgisi Gerektirmez)

En hızlı ve kolay yöntemdir. Herhangi bir API anahtarı veya kodlama bilgisi gerektirmez .

Adım Adım iframe Ekleme:

1. Google Haritalar’da Konum Bulun

• Google Maps’e gidin (maps.google.com)
• İşletmenizin adresini arayın

2. Paylaşma Seçeneğini Kullanın

• Sol taraftaki menüden “Paylaş” veya “Share” butonuna tıklayın
• “Haritayı yerleştir” (Embed map) sekmesini seçin

3. HTML Kodunu Kopyalayın

• Boyutları ayarlayın (Küçük, Orta, Büyük veya Özel)
• HTML iframe kodunu kopyalayın

4. Web Sitenize Yapıştırın

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d...KOD...!2d...!3d...!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x...%3A0x...!2s...!5e0!3m2!1str!2str!4v..."
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

Önemli Parametreler:

• width ve height: Harita boyutları (piksel veya % olarak)
• allowfullscreen: Tam ekran moduna izin verir
• loading="lazy": Sayfa performansı için lazy loading
• referrerpolicy="no-referrer-when-downgrade": Güvenlik için önerilir

2. Google Maps Embed API ile Gelişmiş Entegrasyon

Daha fazla özelleştirme ve kontrol için Maps Embed API kullanılır .

API Anahtarı Alma:

1. Google Cloud Console’a Giriş

• console.cloud.google.com adresine gidin
• Google hesabınızla giriş yapın

2. Proje Oluşturun

• “Proje Seç” > “Yeni Proje”
• Proje adı verin (örn: “Web Sitesi Harita”)

3. API’leri Etkinleştirin

• “APIs & Services” > “Library”
• Maps Embed API‘yi arayın ve etkinleştirin
• İsteğe bağlı: Maps JavaScript API, Places API

4. API Anahtarı Oluşturun

• “Credentials” > “Create Credentials” > “API Key”
• Anahtarı kopyalayın ve güvenli bir şekilde saklayın

5. Güvenlik Ayarları (Kritik!)

• API anahtarınıza tıklayın
• “Website restrictions” bölümünde sitenizin domainini ekleyin:

  https://www.siteniz.com/*
  https://siteniz.com/*

• “API restrictions” ile sadece gerekli API’lere izin verin

Embed API URL Yapısı:

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

MAP_MODE Seçenekleri:

Örnek – Place Modu:

<iframe
  width="600"
  height="450"
  style="border:0"
  loading="lazy"
  allowfullscreen
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?key=API_ANAHTARINIZ&q=Eiffel+Tower,Paris+France">
</iframe>

Örnek – Directions Modu:

<iframe
  width="600"
  height="450"
  style="border:0"
  src="https://www.google.com/maps/embed/v1/directions?key=API_ANAHTARINIZ&origin=Oslo+Norway&destination=Telemark+Norway&avoid=tolls|highways">
</iframe>

3. WordPress’e Google Harita Ekleme

WordPress kullanıcıları için üç farklı yöntem bulunmaktadır .

Yöntem 1: Eklentisiz (iframe)

Adımlar:

1. Google Maps’ten iframe kodunu kopyalayın (Yukarıdaki 1. yöntem)
2. WordPress admin panelinden sayfa/düzenleyiciyi açın
3. “Özel HTML” bloğu ekleyin
4. Kodu yapıştırın ve yayınlayın

Avantaj: Hızlı, ek yük yok
Dezavantaj: SEO avantajı sınırlı, yönetimi zor

Yöntem 2: All in One SEO (AIOSEO) Eklentisi

En iyi SEO uyumlu yöntemdir .

Kurulum:

1. AIOSEO Pro eklentisini yükleyin ve etkinleştirin
2. All in One SEO > Yerel SEO bölümüne gidin
3. “Yerel SEO’yu Etkinleştir” butonuna tıklayın

Tek Konum Ekleme:

1. All in One SEO > Yerel SEO > Konumlar sekmesi
2. “Çoklu Konumlar” seçeneğini “Hayır” yapın
3. Haritalar bölümünde adresi girin
4. Google Maps API anahtarınızı ekleyin

Birden Fazla Konum:

1. “Çoklu Konumlar” seçeneğini “Evet” yapın
2. Konumlar > Yeni Ekle ile her şube için ayrı giriş oluşturun
3. Her konum için harita koordinatlarını ayarlayın

API Anahtarı Alma (AIOSEO için):

1. Google Maps Platform > “Başlayın”
2. Fatura hesabı oluşturun (Aylık $300 ücretsiz kullanım)
3. Proje oluşturun ve API anahtarını kopyalayın
4. AIOSEO ayarlarına yapıştırın

Yöntem 3: WP Google Maps Eklentisi

Ücretsiz ve kullanımı kolay alternatif .

Kurulum:

1. WordPress eklenti deposundan “WP Google Maps” yükleyin
2. Etkinleştirin ve Haritalar menüsüne gidin
3. API anahtarı oluşturma bağlantısına tıklayın
4. Google Cloud’da proje oluşturun ve API anahtarını alın
5. Eklentiye API anahtarını girin
6. “My first map” haritasını düzenleyin
7. Kısa kodu [wpgmza id="1"] sayfalarınıza ekleyin

4. Google My Business ile Harita Ekleme

İşletmenizin Google Haritalar’da görünmesi için :

1. Google Benim İşletmem’e Kayıt

• business.google.com adresine gidin
• Gmail hesabınızla giriş yapın

2. İşletme Ekleme

• “İşletme ekle” veya “Konum ekle”
• İşletme adını girin
• Kategori seçin (örn: Restoran, Mağaza, Kuaför)

3. Adres ve Konum Belirleme

• Tam adresi girin
• Haritada raptiye (pin) konumunu ayarlayın:
• Profili düzenle > Konum
• “İşletmenin bulunduğu konum” yanındaki Düzenle’ye tıklayın
• Haritayı hareket ettirerek tam konumu işaretleyin
• “Bitti” > “Kaydet”

4. Doğrulama

• Google, işletmenize postaladığı kodu girin veya telefon doğrulaması yapın
• Doğrulama sonrası işletmeniz Google Haritalar’da görünür

5. Responsive (Mobil Uyumlu) Harita Ekleme

Mobil cihazlarda düzgün görünmesi için CSS ile responsive yapılandırma :

<div class="map-container">
  <iframe 
    src="https://www.google.com/maps/embed?pb=..."
    width="100%" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
  </iframe>
</div>

<style>
.map-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 oranı */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

6. Google Maps JavaScript API ile Gelişmiş Entegrasyon

Dinamik ve interaktif haritalar için :

Örnek Kod:

<!DOCTYPE html>
<html>
<head>
  <title>İşletme Konumu</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=API_ANAHTARINIZ"></script>
  <style>
    #map { height: 400px; width: 100%; }
  </style>
</head>
<body>
  <h3>İşletmemizin Konumu</h3>
  <div id="map"></div>

  <script>
    function initMap() {
      const konum = { lat: 41.0082, lng: 28.9784 }; // İstanbul örneği
      const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 15,
        center: konum,
      });
      const marker = new google.maps.Marker({
        position: konum,
        map: map,
        title: "İşletme Adı"
      });
    }
    window.onload = initMap;
  </script>
</body>
</html>

7. Sık Karşılaşılan Sorunlar ve Çözümleri

8. Ücretlendirme ve Limitler

Maps Embed API:

• Aylık 500.000 yükleme ücretsiz
• Bu limit çoğu küçük ve orta ölçekli web sitesi için yeterlidir
• Ücretsiz limit aşılırsa kullandıkça öde modeli geçerli olur

Diğer API’ler:

• Maps JavaScript API: Aylık $200 kredi ücretsiz
• Places API: Ayrı ücretlendirme
• Detaylı fiyatlandırma: cloud.google.com/maps-platform/pricing

Sonuç

Google Harita ekleme işlemi, teknik bilgi seviyesine göre farklı yöntemlerle yapılabilir:

• Hızlı çözüm: iframe embed (API anahtarı gerekmez)
• SEO odaklı: AIOSEO gibi WordPress eklentileri
• Gelişmiş özellikler: JavaScript API ve özel geliştirme

İşletmenizin Google My Business’ta kayıtlı olması ve doğrulanmış olması, haritanızın Google’da görünürlüğünü artırır ve yerel SEO’ya katkı sağlar .

Not: Google Cloud Console arayüzü ve fiyatlandırma politikaları zaman içinde değişebilir. Güncel bilgiler için resmi Google dokümantasyonunu kontrol edin.