Harita widgetini herhangi bir siteye nasıl gömersiniz

Oluşturucuyla başlayın (tek gerçek iş burada)

Her şey harita gömme oluşturucusunda başlar. Coğrafi kodlama bir kez, orada yapılır — kopyaladığınız kod sabit koordinatlar taşır, yani bir coğrafi kodlayıcı kesintisi ya da “adres normalleştirmesi” pininizi sonradan asla oynatamaz. Adresi yazın, pinin yerine oturmasını izleyin, kopyalamadan önce onu gerçek girişinizin üzerine sürükleyin: o on saniyelik sürükleme, “doğru sokak” ile “doğru kapı” arasındaki farktır.

Kendinizinkini kurmadan önce bitmiş bir çok şubeli örnek görmek ister misiniz? Oluşturucu demosunu açın — adresleri, renkli numaralı pinleri ve konumlar panelini önizlemede canlı gösteren üç şubeli örnek bir şirket yükler, hemen kurcalayabilirsiniz.

WordPress: eklenti kısa kodu mu, ham iframe mi?

İki yol da aynı widgetle biter — zevkinize göre seçin.

Eklenti yolu (önerilir): whatismylocation-widget.zip dosyasını indirin → wp-admin ▸ Eklentiler ▸ Yeni Ekle ▸ Eklenti Yükle → Etkinleştir. Ardından bir Kısa kod bloğu ekleyin:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

Öznitelikler oluşturucudaki seçeneklerle aynı okunur: theme, marker, zoom, height, directions ve şubeler için panel= ile motion= eşliğinde pins="lat,lng,Label~Address|…" (aşağıdaki başvuru tablosuna bakın). Oluşturucunun WordPress bölümü tam kısa kodu sizin için üretir — yazmanıza gerek yok.

Eklentisiz yol: oluşturucudaki iframe'i bir Özel HTML bloğuna yapıştırın. Aynı widget, güncellenecek eklenti yok; karşılığında içeriğinizde daha uzun bir işaretleme olur ve sonradan öznitelik düzeyinde düzenleme yapamazsınız.

Squarespace, Shopify, Notion — ve diğerleri

WordPress dışında iş genelde tek yapıştırmadır: platformunuzun HTML/gömme öğesini ekleyin (Wix Embed HTML, Squarespace Code bloğu, Webflow Embed) ve iframe'i içine bırakın. Bir fark, harita widgetini konum widgetinden daha kolay kılar: allow="geolocation" özniteliğine ihtiyaç duymaz, çünkü ziyaretçilerden hiçbir şey istemez — yani sayfa oluşturucu HTML'inizi yeniden yazdığında korunması gereken kırılgan bir şey yoktur.

Squarespace: bir Code bloğu ekleyip yapıştırın. Baştan bilmekte fayda var: Code blokları Business planı veya üstünü gerektirir — Personal planında blok, kodunuzu çalıştırmak yerine düz metin olarak gösterir.

Shopify yapıştırmadan fazlasını hak ediyor: hazır bir tema bölümü sunuyoruz — temanıza eklenen tek dosya, şubeleri sürükleyip sıralanabilen bloklar hâlinde yöneten yerel bir ayar paneli verir; uygulama da API anahtarı da gerekmez.

Notion ve Google Sites, HTML ile değil URL ile gömer. iframe kodunu hiç kabul etmezler — bunun yerine oluşturucuda Widget URL'sini kopyala düğmesine basın ve adresi Notion'ın /embed bloğuna ya da Google Sites'ın Embed ▸ By URL seçeneğine yapıştırın. Widget tam bağımsız bir sayfadır, bu yüzden her iki yolda da kusursuz görünür.

Salesforce Experience Cloud (herkese açık topluluk siteleri): iframe'i bir HTML Editor bileşenine bırakın — sonra yöneticinizden whatismylocation.ai adresini Setup ▸ Trusted URLs altına frame-src CSP yönergesiyle eklemesini isteyin, yoksa Salesforce çerçeveyi sessizce engeller. Kodla çalışan ekipler aynı URL'yi ~10 satırlık bir Lightning Web Component içine sarabilir:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

Birden çok şube: konumlar paneli

Tek bir gömme kodunda en fazla 10 konum yer alır. Oluşturucunun Gelişmiş modunda her pini konumlandırın, ona bir etiket ve adres verin, sonra Konum ekle düğmesine basın. Ziyaretçiler bir konumlar paneli görür — masaüstünde haritanın yanında bir akordiyon, telefonda kaydırılabilir bir kart şeridi — numaralı pinlerle: bir şube seçildiğinde harita ona uçar, adresini ve kendi Yol tarifi al bağlantısını gösterir.

• panel= düzeni seçer: auto (varsayılan — geniş iframe'lerde yanda, dar olanlarda şerit), side, bottom ya da düz pin + açılır balonlar için none.
• motion= geçiş animasyonunu belirler: smooth (varsayılan uçuş), fade, lively veya none. Sisteminde “hareketi azalt” ayarı açık olan ziyaretçiler, siz ne seçerseniz seçin her zaman anında geçen sürümü görür.
• open=no ile tüm girdiler kapalı başlar; harita tüm şubelere otomatik sığar ve zoom değeriniz üst sınır olur.

Seçenekler başvurusu

WordPress sorun giderme

Kısa kod sayfada düz metin olarak görünüyor. O blok kısa kodları işlemiyordur. Blok düzenleyicide Kısa kod bloğunu kullanın (kod ya da önceden biçimlendirilmiş blok değil); Elementor'da Shortcode widgetini, Divi'de bir Code modülünü seçin. Klasik düzenleyici kullanıyorsanız: Görsel sekmesinde düz metin olarak yazın.

Hiçbir şey görünmüyor. Sayfa kaynağını açın ve whatismylocation arayın. Eksik lat/lng hakkında bir HTML yorumu, koordinatların olmadığı ya da geçersiz olduğu anlamına gelir — öznitelikleri elle yazmak yerine tam kısa kodu oluşturucudan kopyalayın.

Kaydedince iframe kayboluyor (eklentisiz yol). WordPress, unfiltered_html yetkisi olmayan kullanıcı rollerinde iframe'leri siler — çok siteli kurulumlarda buna varsayılan olarak yöneticiler de dahildir — ve bazı güvenlik eklentileri de aynısını yapar. Temiz çözüm eklenti kısa kodudur: rolünüzün ham iframe kaydetme iznine sahip olmasına bağlı değildir.

Harita gri / döşemeler yüklenmiyor. Döşemeler tile.openstreetmap.org adresinden gelir; çok agresif bir reklam engelleyici ya da kurumsal ağ bunları engelleyebilir (kaplama kartı yine de görünür). Başka bir ağda ya da mobil veri kullanan bir telefonda doğrulayın.

Konumlar paneli yok. Panel 2 pinden itibaren görünür — tek konumda klasik kaplama kartı gelir. Ayrıca panel="none" ayarlı olmadığından emin olun.

Geçiş animasyonu oynamıyor. Neredeyse her zaman ziyaretçinin (ya da sizin) işletim sistemindeki “hareketi azalt” ayarı yüzündendir — widget bunu bilerek uygular ve anında geçer. Bu bir hata değildir; diğer ziyaretçiler seçtiğiniz ayarı görmeye devam eder.

Değişiklikler görünmüyor. Bir önbellek eklentisi (ya da barındırma önbelleği) eski sayfayı sunuyordur. Kısa kod özniteliklerini düzenledikten sonra sayfa önbelleğini temizleyin — widgetin kendisinde önbelleğe alınacak bir şey yoktur.