WordPress Google Maps Ekleme: Adım Adım Rehber

WordPress sitenize harita eklemek beş dakikalık bir iştir. Güven oluşturmanıza, yerel SEO’nuzu güçlendirmenize ve müşterilerinizin sizden alışveriş yapmasını kolaylaştırmanıza yardımcı olur. Ancak haritanın düzgün görüntülenmesini ve ihtiyacınız olan özelliklere sahip olmasını sağlamak saatler sürebilir. Üstelik mobil kullanıcıları hesaba katmayı unutursanız, haritanın küçük ekranlarda kesildiğini fark etmeyebilirsiniz.

Bu rehber, WordPress sitenize harita eklemek için üç farklı yöntemi adım adım anlatır: yerel iFrame, harita eklentisi ve ücretsiz widget. Ayrıca olası sorunları ve her yöntemin avantaj-dezavantajlarını da ele alacağız; böylece sizin için en uygun yönteme karar verebilirsiniz.

Watch on youtube

How to Customize and Embed Google Maps on Your WordPress Site

WordPress Google Maps ekleme için üç farklı yöntem

Yöntem 1: Yerel Google Maps iFrame kullanma

Google Maps iFrame yöntemi, web sitenize harita eklemenin en basit ve en hızlı yoludur. İşletmenizi Google Maps’te arar, Paylaş düğmesine tıklar, kodu kopyalar ve bir WordPress sayfasına yapıştırırsınız. Hızlıca çalışır hale getirmeniz için burada adım adım bir anlatım sunuyoruz.

Ancak bu sadelik aynı zamanda bir kısıtlamaya dönüşür. Haritanın görünümünü özelleştiremez, birden fazla pin ekleyemez veya varsayılan görünümün üzerine ek bilgiler görüntüleyemezsiniz. Ayrıca haritanın mobilde kullanılabilir olduğundan emin olmak için harita boyutları ve WordPress sayfa düzeninizle denemeler yapmanız gerekir.

Google Maps iFrame nasıl gömülür

Başlamadan önce işletmenizi Google İşletme Profili platformuna kaydedin. Bu sayede çalışma saatleri, yorumlar veya yemek menünüz dahil olmak üzere tüm bilgilerinizi Google Maps’te görüntüleyebilirsiniz. Eğer size ait olmayan bir adrese veya bir yer işaretine yönlendirme yapacaksanız, doğrudan ilk adıma geçin.

Google Maps’ten gömme kodunu alın

1. google.com/maps adresine gidin ve işletme adınızı veya adresinizi arayın.

2. Ekranın sol tarafındaki işletme bilgilerini inceleyerek doğru pini seçtiğinizden emin olun.

3. Paylaş düğmesine tıklayın.

4. Ekranda bir açılır pencere belirir. Harita yerleştir sekmesine tıklayın.

5. Haritanın web sitenizde nasıl görüneceğine dair bir önizleme belirir. Varsayılan olarak orta boyut seçilidir; sol üstteki açılır menüyü kullanarak küçük veya büyük harita görüntülemeyi ya da özel bir boyut belirlemeyi tercih edebilirsiniz.

6. Boyutu seçtikten sonra HTML’yi Kopyala düğmesine tıklayın. Bu işlem iFrame kod parçacığını panoya kopyalar.

WordPress’e gömme (Blok düzenleyici/Gutenberg)

7. WordPress’te haritayı yerleştirmek istediğiniz sayfayı veya yazıyı açın.
8. + blok ekleyici simgesine tıklayın, filtrelemek için HTML yazın ve sayfaya blok eklemek için Özel HTML seçeneğine tıklayın.

9. Yeni blokta HTML’yi Düzenle seçeneğine tıklayın.

10. iFrame kodunu açılır pencereye yapıştırın. Önizleme sağ tarafta görüntülenir. İşlemi tamamlamak için Güncelle düğmesine tıklayın.

11. Sayfa artık gömülü iFrame haritayı görüntüler. Web sitenizde yayınlamak için Yayınla veya Kaydet düğmesine tıklayın ve nasıl göründüğünü görmek için sayfayı görüntüleyin.

Bu yöntem WordPress’te sayfalarınızı düzenleme şeklinizle uyuşmuyorsa, aşağıdaki düzenleyicilerden birini kullanarak HTML eklemeyi öğrenin:

• WordPress Klasik Düzenleyici
• Elementor HTML widget
• Divi Kod Modülü

Yöntem 2: Özel bir WordPress harita eklentisi yükleme

Yöntem 1 ile karşılaştırıldığında, özel bir WordPress eklentisi daha fazla özelleştirme ve işlevsellik sunar. Eklentiyi, diğer eklentileri yüklediğiniz gibi sitenize yükler, Google Maps API anahtarınızı oluşturup ayarlara yapıştırır ve ardından harita elemanını bir sayfaya eklersiniz.

Bu yöntem biraz daha karmaşıktır. Google Maps API anahtarı almak için Google Cloud Platform’da hesap oluşturmanız, bir faturalandırma hesabı kurmanız ve teknik bir kurulum sürecinden geçmeniz gerekir. Ayrıca harita eklentileri freemium modelle çalışır; temel özelliklere sahip iyi bir ücretsiz plan sunar ancak en iyi yetenekleri tek seferlik bir lisans veya yıllık ücret karşılığında kullanıma açar.

Eklenti sayınızı artırmış olursunuz, bu nedenle kurulumu tamamladıktan sonra web sitenizin hızını test edin. Sitenizi düşük maliyetli bir barındırma planında çalıştırıyorsanız, çok fazla eklenti her şeyi önemli ölçüde yavaşlatabilir, kullanıcı deneyimini olumsuz etkileyebilir ve ziyaretçilerin sitenizi terk etmesine neden olabilir.

Haritanın mobil kullanıcılar için işlevsel olması, eklentiye ve yapılandırma şeklinize bağlıdır. Örneğin WP Go Maps, sıkışık bir görünümden kaçınmak için belirli yükseklik ve genişlik değerleri ayarlamanızı önerir.

WordPress harita eklentisi nasıl kurulur

Bu örnekte, en popüler WordPress Google Maps eklentilerinden biri olan WP Go Maps’i kullanacağım.

WP Go Maps’i kurma

1. WP Go Maps’i yükleyin ve etkinleştirin.

2. Kurulumu tamamlamak için Tanıtımı Atla düğmesine tıklayın.

3. Sol taraftaki menüden Ayarlar seçeneğine tıklayın.

4. Genel sekmesinde harita motoru olarak Google Maps‘i seçin.

Google Maps API anahtarınızı alın

Harita verilerini Google’ın platformundan çekmek için önce bir hesap oluşturup API anahtarınızı almanız gerekir.

5. Google Maps Platform web sitesine gidin ve bir hesap oluşturun.

6. Google Cloud Platform’daki bir yapılandırma akışına yönlendirileceksiniz. Ad, ülke ve para birimi belirleyerek yeni bir faturalandırma hesabı oluşturun.

7. İletişim bilgilerinizi ve ödeme yönteminizi ekleyin. İşlemi tamamladığınızda Gönder ve Faturalandırmayı Etkinleştir düğmesine tıklayın.



Bu seçenekle ayda 10.000 ücretsiz harita yüklemesi hakkınız olur; bu limiti aşarsanız her 1.000 yükleme için 7 dolar ücretlendirilirsiniz. Limitin altında kalırsanız kartınızdan herhangi bir ücret alınmaz, ancak faturalandırma hesabı her durumda gereklidir. (Google, Mart 2025’te eski aylık 200 dolarlık kredisini kaldırarak her API için ayrı bir ücretsiz kullanım hakkıyla değiştirdi; birçok eski rehber hâlâ bu krediden bahsetse de artık geçerli değildir.)

8. Google, Maps hizmetini nasıl kullanmayı planladığınıza dair birkaç soru soracaktır. Soruları yanıtlayın ve Gönder düğmesine tıklayın.

9. Sol taraftaki menüden Anahtarlar ve Kimlik Bilgileri seçeneğine tıklayın.

10. Kimlik Bilgisi Oluştur açılır menüsüne ve ardından API Anahtarı seçeneğine tıklayın.

11. Açılan pencerede yeni API anahtarınızın adını ve izinlerini ayarlayabilirsiniz. Bu ayarları değiştirmeniz gerekmez; en alta kadar kaydırın ve Oluştur düğmesine tıklayın.

12. API anahtarını kopyalayın.

Siteniz yayına geçmeden önce anahtarınızı kısıtlamanız önemlidir. Sayfanızın kaynak kodundaki kısıtlanmamış bir anahtar kopyalanarak faturanızı artırmak için kullanılabilir. Anahtarı alan adınıza kilitlemek için Google’ın API anahtarı en iyi uygulamalarını takip edin.

WordPress’te eklenti kurulumunu tamamlama

13. WordPress kurulumunuzdaki WP Go Maps eklenti ayarları sayfasına geri dönün ve API anahtarını Google Maps API Anahtarı alanına yapıştırın. Ardından Ayarları Kaydet düğmesine tıklayın.

14. Sol taraftaki menüden Haritalar seçeneğine tıklayın.

15. Eklenti sizin için zaten ilk haritayı oluşturmuştur. Görmek için Düzenle düğmesine tıklayın.

16. Haritanızın web sitenizde nasıl görüntüleneceğini buradan yapılandırırsınız. İşletmenizi eklemeye başlamak için İşaretçiler sekmesine tıklayın.

17. Üç nokta menüsüne tıklayın ve önceden belirlenmiş harita işaretçisini silin.

18. Üst kısımdaki İşaretçi Ekle seçeneğine tıklayın.

19. İşletmenizin adresini arayın ve listede göründüğünde seçin.

20. İşlemi tamamlamak için İşaretçi Ekle düğmesine tıklayın.

21. İşletmeniz artık haritada işaretlenmiş durumda. Geri dönüp Ayarlar düğmesine tıklayarak yakınlaştırma seviyesini ve diğer görsel ayarları özelleştirebilirsiniz. İşiniz bittiğinde ekranın alt kısmındaki Haritayı Kaydet düğmesine tıklamayı unutmayın.

22. Haritanızı web sitenizdeki bir sayfaya yerleştirmeye hazır olduğunuzda, sol alt kısımdaki Kısa Kod Al düğmesine tıklayın. Bu işlem kısa kodu panonuza kopyalayacaktır.

23. Haritanızı eklemek istediğiniz sayfaya gidin, yeni bir blok eklemek için tıklayın ve seçenekleri filtrelemek için Kısa Kod yazın. Göründüğünde üzerine tıklayın.

24. Kısa kodu giriş alanına yapıştırın ve Yayınla veya Kaydet düğmesine tıklayın.

25. Sayfayı ziyaret ettiğinizde harita, seçtiğiniz ayarlarla birlikte işaretçinizi görüntüler.

Seçenek 3: Ücretsiz ve özelleştirilebilir bir Google Maps widget’ı ekleme (önerilen)

Jotform Google Maps Widget’ı, eklenti yüklemeyi veya lisans ücreti ödemeyi gerektirmeyen ücretsiz ve tamamen özelleştirilebilir bir haritadır. Bu widget ile şunları yapabilirsiniz:

• Aynı haritada görüntülenen bir veya birden fazla konum ekleyebilirsiniz.
• Yol haritası veya uydu görünümü dahil olmak üzere harita görünümünü seçebilirsiniz.
• Kutular için köşe yarıçapı kontrolüyle birlikte açık veya koyu temaya uyum sağlayabilirsiniz.
• Haritanın boyutunu, düzenini ve yakınlaştırma seviyesini ayarlayabilirsiniz.

Yerel iFrame’lerle karşılaştırıldığında özelleştirilebilir, aynı haritada birden fazla işaretçiye izin verir ve kutudan çıktığı haliyle duyarlıdır (responsive). Bir eklentiyle karşılaştırıldığında ise web sitenizi yavaşlatmaz ve tüm özelliklerinin kilidini açmak için ücretli bir plan gerektirmez.

Bu avantajlara rağmen Jotform Google Maps Widget’ı yine de bir Google Maps API anahtarı gerektirir. Kurulum adımlarını tamamlamanız ve Google ile bir faturalandırma hesabı oluşturmanız gerekecektir.

Jotform Google Maps Widget’ını web sitenize nasıl eklersiniz?

1. Jotform Google Maps Widget sayfasını ziyaret edin. Çoğu durumda yapılandırma aracı otomatik olarak yüklenir; yüklenmezse başlamak için Yeni Web Sitesi Widget’ı Oluştur düğmesine tıklayın.

2. Google Maps API anahtarınızı nasıl alacağınıza dair bu kılavuzu takip edin. Bu kılavuz, Seçenek 2’de ayrıntılı olarak açıklanan tüm adımları ve anahtarınızı güvende tutmak için nasıl kısıtlayacağınızı kapsar. (Google Maps’in her ay 10.000 ücretsiz harita yüklemesine izin verdiğini unutmayın. Bundan sonraki her 1.000 yükleme 7 dolara mal olur.) İşlemi tamamladığınızda Google Maps API anahtarınızı giriş alanına yapıştırın.

3. Genel ayarları isteğinize göre düzenleyin. Bu ayarlar haritanın nasıl görüneceğini ve kaç konum eklemek istediğinizi kapsar. Buradaki ekran görüntüleri, çoklu işaretçili bir haritayı göstermek için Jotform’un San Francisco ve Kanada ofislerini kullanmaktadır; ancak siz tek bir konum veya ihtiyacınız kadar konum ekleyebilirsiniz. İşiniz bittiğinde Devam düğmesine tıklayın.

4. Tema, yazı tipi veya özel CSS gibi stil ayarlarını değiştirin. İşiniz bittiğinde Devam düğmesine tıklayın.

5. Bu son adımda düzeni ve ek özellikleri özelleştirin. Hazır olduğunuzda Web Sitenizde Ücretsiz Deneyin düğmesine tıklayın.

6. Ücretsiz bir Jotform hesabı oluşturun veya mevcut hesabınızla giriş yapın. Giriş işlemini tamamladıktan sonra yerleştirme kodu görüntülenir. Kodu Kopyala düğmesine tıklayın.

7. Seçenek 1’deki 7–11 arası adımları izleyerek yerleştirme kodunu özel HTML bloğuyla sayfanıza ekleyin: Bloğu ekleyin, kodu yapıştırın, ardından Yayınla veya Kaydet düğmesine tıklayın.

8. Sayfayı telefonunuzda açın. Seçenek 1’deki yerel iFrame’den farklı olarak widget, ekrana sığacak şekilde otomatik olarak yeniden boyutlandırılır; böylece mobilde kırpılan harita burada tam olarak görüntülenir.

Akıllı ve sunucusuz widget’larla WordPress sitenizi büyütün

Web sitenize akıllı özellikler eklemek genellikle yeni eklentiler için ödeme yapmak veya kodlarla uğraşmak anlamına gelir. Jotform tüm bunları atlamanıza yardımcı olur: Google Maps Widget’ının yanı sıra Jotform web sitesi widget’ları dizini, web sitenize basit bir HTML kod parçacığı yapıştırarak yapılandırabileceğiniz 150’den fazla ücretsiz, kodsuz widget sunar.

Bu seçenekler Maps widget’ıyla harika bir uyum sağlar:

• Çalışma Saatleri Widget’ı: Bu widget, haritanızın yanına yerleştirebileceğiniz canlı açık veya kapalı durumu dahil olmak üzere çalışma saatlerini gösterir; böylece sizi haritada bulan ziyaretçiler açık olup olmadığınızı anında öğrenir. API anahtarı gerektirmez.
• Randevu Alma Widget’ı: Web sitenize bir randevu özelliği ekleyerek insanların sizinle görüşme planlamasını sağlayın. Bu widget, müsaitlik eklemeyi, hizmet türlerinizi süre ve fiyatlandırmayla listelemeyi ve ekstra bir araca ihtiyaç duymadan rezervasyon kabul etmeyi destekler.
• SSS Widget’ı: Bu widget, sık sorulan soruların yanıtlarını aranabilir bir akordeon düzeninde listeler. Aynı şeyi WordPress’te yapmak kolaydır, ancak bu widget’ın sunduğu şık deneyimi elde etmek kodlarla uğraşmak veya bir eklenti daha yüklemek anlamına gelir.

Giriş seviyesi bir WordPress barındırma planı kullanıyorsanız eklentiler temel sunucu kaynaklarını tüketir, web sitenizi yavaşlatır ve ziyaretçilerinize kötü bir kullanıcı deneyimi sunar. Jotform’un widget’ları Jotform’un altyapısında çalışır, bu nedenle yük web siteniz tarafından karşılanmaz. Bu da sunucu kaynaklarını serbest bırakarak web sitenizi daha hızlı ve kullanımı daha kolay hale getirir.

WordPress sitenizi bir üst seviyeye taşımak mı istiyorsunuz? Şunlara göz atın:

• Bir web tasarım kursuna yatırım yapmadan profesyonel bir web sitesi oluşturmayı öğrenmek için WordPress nasıl kullanılır kılavuzumuz
• Otomasyon, ödemeler ve gelişmiş özellikleri tek bir platformda sunarak veri toplama sürecinizi kolaylaştıran Jotform’un WordPress entegrasyonu