Bir haritayı sitenize eklemek, ziyaretçilerin işletmenizi veya fiziksel konumunuzu bulmasına yardımcı olmanın en kolay yollarından biridir. Google Maps oluşturucu, kullanıma hazır kodlar sunarak bu süreci basitleştirir; kopyalayıp yapıştırabileceğiniz kodlar — kodlama becerisi gerekmez.
Konumunuzu net şekilde göstermek, yön tarifleri sunmak veya kullanıcılarla güven oluşturmak istiyorsanız, bir HTML Google Maps widget ihtiyacınız olan şeydir. Zaman kazandırır, profesyonel görünür ve tüm cihazlarda kusursuz çalışır.
Yerel bir işletme yürütüyorsanız, birden çok şubeyi yönetiyorsanız veya bir etkinlik konumunu sergiliyorsanız, adresinizi göstermek için Google Haritalar HTML kodu üreteci kullanmak en hızlı ve etkili yöntemdir. Kendi widget’inizi sadece birkaç tıklama ile nasıl oluşturacağınıza bakalım.
Bir Haritanın HTML Kodunu Saniyeler İçinde Oluşturun
Artık bir Google Maps widget’ı eklemenin neden bu kadar önemli olduğunu biliyorsunuz; işte Elfsight ile bir dakika içinde nasıl bir tane oluşturabileceğiniz. Kod yazmanıza veya API’lerle uğraşmanıza gerek yok — süreç hızlı, sezgisel ve acemi dostu.
- Elfsight düzenleyicisini açın ve önceden tasarlanmış bir Google Haritalar şablonu seçin.
- Adresinizi veya koordinatlarınızı girin ve yakınlaştırma düzeyi, kontroller ve işaretçi stilini ayarlayın.
- Harita temalarını, renkleri ve boyutları seçerek görünümü web sitesi tasarımınıza uyacak şekilde özelleştirin.
- Tıklayın “Web Sitenize Ücretsiz Ekle”, harita kodunu kopyalayın ve web sitenizin arka ucuna yapıştırın.
Widget’i denemeye hazır mısın? Kendi Google Haritalarını 1-2-3 adımda oluştur!
Elfsight Google Maps Widget Özellikleri
Google Haritalar widget’ınızı oluşturduktan sonra, işlevselliği, görünümü ve kullanıcı etkileşimini artırmaya yönelik geniş bir özellik yelpazesiyle özelleştirebilirsiniz. Elfsight, widget’ı sitenizin tasarımına ve ihtiyaçlarına kolayca uyumlu hale getirmenizi sağlar.
Elfsight’in harita üretici çözümünü öne çıkaran temel özellikler ve faydalar şu şekildedir:
- Birden Fazla Konum Desteği. Tüm şubelerinizi, ofislerinizi veya hizmet alanlarınızı tek bir harita görünümünde gösterin.
- Özel işaretçi ikonları. Kendi görsellerinizi kullanın veya yerleşik ikonlar arasından seçim yaparak harita işaretçilerini kişiselleştirin ve görsel tutarlılığı artırın.
- Ayarlar ve Yakınlaştırma Seviyelerini ayarlayın. Daha iyi kullanılabilirlik için kaydırma yakınlaştırma, sürükleme, harita türü ve Sokak Görünümü gibi özellikleri etkinleştirin veya devre dışı bırakın.
- Renk Şemaları ve Harita Temaları. Markanızın stil ve paletine uygun olarak önceden ayarlanmış temalardan seçim yapın veya renkleri manuel olarak ayarlayın.
- Duyarlı ve Mobil Uyumlu Düzen. Widget tüm ekran boyutlarına otomatik olarak uyum sağlar, kesintisiz bir mobil deneyim sunar.
- Detaylı bilgi kartları. Her konuma açıklamalar, iletişim bilgileri veya çalışma saatlerini ekleyin.
- Hızlı Yüklenen ve Temiz Kod. Oluşturulan HTML ve CSS, performans ve sorunsuz entegrasyon için optimize edilmiştir.
Bu özellikler mevcut olduğunda, sadece bir harita eklemekle kalmıyor — kullanıcılar sizinle buluşup iletişim kurabilecekleri, markalı bir yol da kazanıyor. Şimdi, Elfsight’in Google Haritalar kod üretecini kullanarak tam kurulum ve yükleme sürecini adım adım inceleyelim.
Google Maps Kod Üreteci: Adım Adım
Elfsight’in Google Haritalar widget’ından en iyi şekilde faydalanmanıza yardımcı olmak için burada haritanızı oluşturup kurmanıza dair eksiksiz bir adım adım rehber vardır. Bu adımlar, yalnızca yerleşik düzenleyiciyi kullanarak şablon seçiminden özelleştirmeye ve son gömme işlemine kadar sizi yönlendirecek — kod gerekmez.
- Bir Şablon Seçin. Widget düzenleyicisini açın düzenleyici arasından çeşitli tasarım seçeneklerinden birini seçin. Web sitenizin ihtiyaçlarına en uygun olanı belirleyin ve “Bu şablonla devam et” düğmesine tıklayın.
- Yol Tarifi Özelliğini Etkinleştirin. Hâlâ “Harita” sekmesinde kalın, açın “Yol Tarifi” bölümünü ve Yol Tarifi Düğmesini Göster seçeneğini açın. Yol tarifinin nerede görüneceğini seçin — ya doğrudan harita üzerinde ya da Google Haritalar kullanılarak yeni bir tarayıcı sekmesinde.
Bu adım adım kurulum, Google Haritalar aracınızın profesyonel görünmesini, sorunsuz çalışmasını ve markanızı yansıtmasını sağlar. Haritanız artık hazır olduğuna göre, farklı web sitesi platformlarında en iyi nasıl gömüleceğini görelim.
Harita Kodunuzu Nerede Gömmelisiniz: İpuçları
Harita aracınızı özelleştirdikten sonra, bunu web sitenize gömmek için hazırsınız. Elfsight, herhangi bir platformda çalışan basit bir HTML kod parçacığı sunar. Aşağıda genel HTML entegrasyonu ile platforma özgü gömme yöntemleri için talimatlar bulunmaktadır.
- Ham HTML Gömme: Oluşturulan kodu kopyalayın ve haritanın görünmesini istediğiniz HTML belgenizin <body> bölümüne yapıştırın.
- WordPress: Sayfa düzenleyicisini açın, Gutenberg’te Özel HTML bloğuna geçin veya Klasik Düzenleyici’de Metin sekmesini açın ve kodu ihtiyacınız olan yere yapıştırın.
- Webflow: Tasarımınıza bir Göm öğesi ekleyin, kodu yapıştırın ve gerekirse kapsayıcı boyutunu ayarlayın.
- Squarespace: Bir sayfaya widget eklemek için bir “Kod” bloğu kullanın. Blok ayarlarında JavaScript’in etkin olduğundan emin olun.
- Shopify: Tema Düzenleyicisini açın veya kod düzenleyicisinde ilgili şablonu açın ve kodu bir bölümün veya sayfa dosyasının içine yapıştırın.
- BigCommerce: Script Yöneticisi’ni kullanın veya istediğiniz konumda haritayı göstermek için belirli bir şablon dosyasına kodu manuel olarak ekleyin.
Ayrıca görsel dengenin de farkında olun — haritanız, yakınınızdaki içerikle uyumlu olmalı, onu boğmamalı. Düzeni temiz ve kolay okunabilir tutmak için boşluk ve hizalamayı kullanın.
İster vitrin için, ister ofis için ya da bir etkinlik için olsun, haritayı gömmek net ve platform dostu bir işlemdir. Daha fazla kontrol istiyorsanız, kendi Google Maps’inizi HTML kullanarak manuel olarak oluşturup biçimlendirebilirsiniz. Şimdi bunu bir sonraki bölümde keşfedelim.
Google Haritalar HTML Kodunu Manuel Olarak Yazın
Google Maps kullanarak konum haritasını manuel eklemek için şu adımları izleyin:
- Google Haritalar’da konumunuzu bulun. Devam edin ve https://www.google.com/maps adresine gidin ve konumunuzu veya işletme adını girin. Göstermek istediğiniz tam alanı çerçevelemek için yakınlaştırma ve sürükleme araçlarını kullanın. Gömmeden önce farklı görünümler (sokak görünümü, uydu görünümü veya harita görünümü) önizleyebilirsiniz.
- Paylaş düğmesine tıklayın ve Haritayı Göm sekmesini seçin. Konum bilgi panelinin sağ-alt köşesinden Paylaş‘e tıklayın, ardından Haritayı Göm sekmesine geçin. Google Haritalar, bir önizleme penceresiyle <iframe> gömme kodu oluşturacaktır.
- Gömme boyutunu seçin veya boyutları manuel olarak özelleştirin. Google önceden tanımlanmış boyutlar sunar (küçük, orta, büyük), ancak genişlik ve yüksekliği tanımlamak için “<em>Özel Boyut</em>” seçeneğine tıklayabilirsiniz. Aksi halde bunları kodunuzda daha sonra doğrudan ayarlayabilirsiniz.
- Oluşturulan <iframe> kodunu kopyalayın. Google’ın sağladığı gömme kod parçasını almak için “HTML’yi Kopyala” düğmesine tıklayın.
- Sayfanızda bir HTML konteyneri oluşturun. Bir <div> veya <section> öğesi kullanarak haritayı düzen kontrolü için sarın. Bu, ileride özel CSS, boşluk ve duyarlı davranışları uygulamanıza yardımcı olur.
- Gömme kodunu kapsayıcınıza yapıştırın. Düzeninize uygun olarak genişlik, yükseklik ayarlarını yapın veya stil/sınıf özniteliklerini ekleyin. Mobil uyumluluk için yüzde cinsinden genişlikler veya duyarlı sınıf yardımcıları kullanın.
İşte Google Haritası gömme için özel bir HTML bloğu örneği:
<section class="location-map">
<h3>Ofisimize Ziyaret</h3>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.019319823711!2d-122.4206796846815!3d37.77928097975725!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808c2ed0f2d3%3A0xb45bdf53e4e3e92f!2sSan%20Francisco!5e0!3m2!1sen!2sus!4v1618876956475!5m2!1sen!2sus"
width="100%"
height="350"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</section>"Bu yöntem, özel düzenler için HTML ve stil üzerinde doğrudan erişim sağlar. Ancak manuel olarak yönetmek zaman alabilir — özellikle birden çok pin, tasarım özelleştirmesi veya sorunsuz güncellemeler istiyorsanız.
Şimdi, bu yaklaşımı daha hızlı ve esnek bir çözüme ulaşmak için bir harita kodu üreteciyle karşılaştıracağız.
Harita Kodu Üreteci vs Manuel Çözüm
Elle manuel HTML eklemesi esneklik sunsa da, daha fazla zaman, teknik beceri ve uygulamalı güncellemeler gerektirir. Görsel bir harita üreteci bu karmaşıklıkları ortadan kaldırır ve konumunuzu sergilemenin daha kolay ve güvenilir bir yolunu sunar. Hangi seçeneğin daha iyi olduğuna karar vermenize yardımcı olacak ayrıntılı bir karşılaştırma aşağıdadır:
| Özellik | Manuel HTML Gömme | Elfsight Harita Kod Üreteci |
|---|---|---|
| Kurulum Süresi | Harita üretimi, kopyala-yapıştır ve düzenleme testi dahil olmak üzere 5–15 dakika. | Görsel düzenleyiciyle 1–2 dakikada ve anında gömme kodu üretin. |
| Teknik Bilgiler | HTML, konteynerler ve gömme işlemleri hakkında bilgi gerekir. | Kodlama gerekmez — adım adım rehberli, tamamen görsel bir süreç. |
| Tasarım Özelleştirme | Özel CSS veya JS ayarlarıyla eşleşmediği sürece sınırlı. | Renkler, harita türü, işaretçiler, etiketler ve yerleşim seçenekleri üzerinde tam kontrol. |
| Hata Riski | Kırık sayfa düzenlerine, duyarlı olmayan tasarım veya kodun yanlış konumlanmasına yol açabilir. | Doğrulanmış kod çıktısı — hatasız ve yapıştırmaya hazır. |
| Duyarlı Tasarım | Mobil uyumluluk için manuel CSS ayarlaması gerekir. | Varsayılan olarak mobil için optimize edilmiş — ekran boyutlarına otomatik olarak uyum sağlar. |
| Harita Özellikleri | Temel gömme; özel pinler veya stil desteği yok. | Birden çok konum, özel işaretler, etiketler, temalar ve bilgi balonları. |
| Bakım ve Güncellemeler | Manuel düzenlemeler her HTML bloğu veya şablon dosyasında gerekir. | Elfsight kontrol panelinizden istediğiniz zaman haritaları yönetin ve güncelleyin. |
| Platform Uyumluluğu | Yerleşim ve biçimlendirmeye bağlı olarak — platform başına test gerekir. | WordPress, Shopify, Webflow ve dahası dahil herhangi bir platformda çalışır. |
Geliştiriciler ve geliştirici olmayanlar için bile bir üretici araçtır; zamandan tasarruf sağlar, ölçeklenebilir bir çözüm sunar ve minimum çaba ile profesyonel sonuçlar garanti eder. Ancak en iyi araçlar bile küçük sorunlarla karşılaşabilir — şimdi harita kodunuzu gömme sırasında en yaygın sorunları nasıl çözeceğimizi ele alacağız.
Yaygın Sorunlar İçin Çözümler
Güvenilir bir harita aracı veya doğru biçimde gömülü HTML kodu kullansanız bile, haritayı web sitenize yapıştırdıktan sonra bazı sorunlar ortaya çıkabilir. Aşağıda, sık karşılaşılan sorunlar, görüntü hataları ve haritanız beklediğiniz gibi çalışmıyorsa kontrol etmeniz gerekenler hakkında ayrıntılı bir SSS bulunuyor.
Kodu ekledikten sonra harita neden görünmüyor?
Harita neden sayfa düzenimi üst üste getiriyor veya bozuluyor?
Gömülü haritayı web sitenizin CSS’iyle stillendirebilir miyim?
Harita yerine neden gri kutu veya boş bir alan var?
Harita yükleniyor, ancak yakınlaştırma veya sürükleme gibi kontroller çalışmıyor. Sorun ne?
Gömülü harita konumunu nasıl ayarlayabilirim?
Çoğu harita görüntüleme sorunu, doğru konumlandırma, duyarlı yerleşim ayarları ve kodun temiz entegrasyonu ile çözüme kavuşur.
Sonuç
Web sitenize Google Haritalar widget’ını eklemek karmaşık olmak zorunda değildir. HTML’yi manuel olarak yazmayı mı yoksa görsel bir kod üreteci mi kullanmayı seçerseniz seçin, konumunuzu net göstermeye odaklanmak kullanıcı deneyimini artırır ve ziyaretçilerin sizinle daha hızlı bağ kurmasını sağlar. Göründüğü gibi, bir oluşturucu kullanmanın hızı, görsel tutarlılık ve kullanım kolaylığı açısından belirgin avantajlar sunar.
Hızlı özelleştirmeden mobil uyumlu tasarıma ve hatasız yayınlama süreçlerine kadar, bir harita üreticisi konum bloğunu oluşturmanın ve yönetmenin en verimli yoludur. Süreci basitleştirir, tahmin yapma ihtiyacını ortadan kaldırır ve sitenizin her yerde doğru, profesyonel görünümlü haritalar göstermesini sağlar.
Daha Fazla Kılavuz Mu Arıyorsunuz?
Büyüyen Toplulukumuza katılın; geri bildirim paylaşın, başkalarıyla bağlantı kurun ve yeni özelliklerden haberdar olun. Geliştirme için bir fikriniz var mı? Bunu İstek Listemize ekleyin — görüşlerinizi duymaktan memnun oluruz!
