Uygulamanıza Harita Nasıl Eklenir: Gömülü Haritalar, Etkileşimli Haritalar ve Mağaza Bulucular

Uygulamanıza harita eklemek için önce bir statik gömme (tek bir konum ve bir iğne, örneğin “mağazamızı bulun”) mi yoksa bir etkileşimli harita (verinizden birçok iğne, filtreler, kümeleme, “yakınımda”) mi istediğinize karar verin. Tek bir konum için gömülü bir harita en hızlı yoldur ve Google’ın Maps Embed API’siyle ücretsizdir. Etkileşimli haritalar için bir JavaScript harita kütüphanesi kullanın — Google Maps JavaScript API, Mapbox GL JS veya açık kaynak Leaflet ve bir karo sağlayıcısı — her yerin enlem ve boylamını veritabanınızda saklayın ve API anahtarınızı kendi alan adınızla sınırlayın. Sağlayıcı ayrıntıları aşağıda, her sağlayıcının kendi dokümantasyonundan alınmış olup Eylül 2026 itibarıyladır.

Nasıl bir haritaya ihtiyacınız var?

Çoğu küçük işletme sitesi yalnızca ilk satıra ihtiyaç duyar. Dizinler, pazar yerleri ve ilan siteleri üçüncü ve dördüncü satıra ihtiyaç duyar.

Seçenekleriniz

Google Maps Platform

Google’ın başlangıç rehberi, bir faturalandırması etkin Cloud projesi oluşturmanız ve kullanmak istediğiniz API’leri etkinleştirmeniz gerektiğini söyler. Kullandıkça öde fiyatlandırması, Dinamik Haritalar dahil Essentials SKU’ları ayda 10.000 etkinlik ücretsiz sınırı ile verir ve bunun üstünde Dinamik Haritalar için her 1.000 etkinlik başına 7,00 $ (ilk hacim kademesinde) listeler. Maps Embed SKU’su sınırsız ve ücretsiz olarak listelenir. Google ayrıca aylık abonelik planları da satar. Güncel rakamlar için Google Maps Platform fiyatlandırmasını kontrol edin.

Mapbox

Mapbox’ın fiyatlandırma sayfası, web’de Mapbox GL JS için ayda 50.000 ücretsiz harita yüklemesi, sonra her 1.000 için 5,00 $ listeler. Bkz. Mapbox fiyatlandırması.

Leaflet ve OpenStreetMap

Leaflet, mobil uyumlu etkileşimli haritalar için yaklaşık 42 KB JavaScript olan açık kaynak bir kütüphane olarak kendini tanımlar. Haritanın görüntüleri olan karoların bir yerden gelmesi gerekir. OpenStreetMap’in herkese açık karo sunucuları cazip görünür, ama karo kullanım politikası görünür atıf ister, toplu indirmeyi yasaklar, hizmet garantisi sunmaz ve ticari hizmetleri erişimin geri çekilebileceği konusunda uyarır. Gerçek bir ürün için Leaflet ile çalışan ticari veya kendi barındırdığınız bir karo kaynağı kullanın.

API anahtarları: herkese açık, ama kısıtlı

Tarayıcıda kullanılan harita anahtarları, sayfanızı açan herkes tarafından görülebilir. Bu beklenen bir durumdur, ama birinin anahtarınızı kopyalayıp kendi kullanımını çalıştırabileceği anlamına gelir ve faturanız artabilir. Google’ın güvenlik rehberi, anahtarın yalnızca kullandığınız API’lerde çalışması için web sitesi (HTTP yönlendiren) kısıtlamaları ile alan adlarınızı ve API kısıtlamalarını eklemenizi önerir.

Toplu adres koordinatı bulma gibi sunucu tarafı servisler için kullanılan anahtarlar ayrı olmalı ve sunucu tarafı gizli bilgilerde tutulmalıdır; sayfada değil. Ayrıca bir hatanın büyük bir faturaya dönüşmemesi için sağlayıcının konsolunda bütçe uyarıları veya kotalar belirleyin.

Koordinat bulma: adresleri bir kez koordinata çevirin

Haritalar adres değil, enlem ve boylam çizer. Bir adresi koordinata çevirmeye koordinat bulma (geocoding) denir ve çoğu sağlayıcı bunu istek başına ücretlendirir. Verimli yaklaşım:

1. Bir liste kaydedildiğinde adresini sunucuda koordinata çevirin.
2. Enlem ve boylamı veritabanında saklayın.
3. Harita saklanan koordinatları okur; sayfa görüntülemesinde asla koordinat bulmaz.

Koordinat bulma sonuçlarını ne kadar süre saklayabileceğinizi sağlayıcıların şartlarında kontrol edin; bunlar farklılık gösterir.

Örnek promptlar

Tek bir gömülü harita:

İletişim sayfasına, adresimizi (12 High Street, Leeds) gösteren gömülü bir Google haritası ekle; Maps Embed API’sini kullan ve anahtarı GOOGLE_MAPS_EMBED_KEY içinde tut. Altına bir “Yol tarifi al” bağlantısı ekle. Telefonlarda tam genişlikte olsun ve tembel yüklensin.

Listelerden etkileşimli bir harita:

Enlem ve boylamı listings tablosuna ekle. Bir ilan oluşturulduğunda veya adresi değiştiğinde, GEOCODING_API_KEY içindeki anahtarla sunucuda koordinatını bul ve kaydet. Gezinme sayfasında Leaflet kullanarak her ilan için bir iğnesi olan bir harita göster; iğneler üst üste geldiğinde kümeleme yap. Bir iğneye tıklandığında başlık, fiyat ve bir bağlantı göstersin. Harita ve liste aynı filtreleri kullansın.

“Yakınımda”:

Ziyaretçinin konumunu isteyen bir “Yakınımda” düğmesi ekle ve 10 km içindeki ilanları mesafeye göre sıralayarak göster. Konum erişimini reddederlerse bir şehir yazmalarına izin ver.

Adım adım

1. Harita türünü seçin, en üstteki tablodan.
2. Sağlayıcı hesabını ve bir proje oluşturun; yalnızca ihtiyacınız olan API’leri etkinleştirin.
3. Anahtarları oluşturun: alan adlarınızla (inşa sırasında önizleme alan adınız dahil) kısıtlanmış bir tarayıcı anahtarı ve gerekirse koordinat bulma için bir sunucu anahtarı.
4. Anahtarları gizli bilgi olarak saklayın ve uygulamanızın bunları kullanmasını isteyin; tarayıcı anahtarı sayfaya girse bile kısıtlı kalır.
5. Her yer için koordinatları veritabanınızda saklayın.
6. Haritayı oluşturun: iğneler, açılır pencereler, kümeleme ve makul bir varsayılan yakınlık.
7. Bir listeyle eşleştirin. Yalnızca harita, telefonda ve ekran okuyucular için kullanmak zordur. Aynı sonuçları liste olarak da gösterin.
8. Sağlayıcı konsolunda bir bütçe uyarısı belirleyin.
9. Canlı alan adında yayınlayın ve test edin; çünkü yönlendiren kısıtlamaları, canlı alan adı eklenene kadar haritayı sıklıkla engeller.

Sık yapılan hatalar

• Kısıtlanmamış anahtarlar. Herkes bunları kendi sitesinde yeniden kullanabilir.
• Her sayfa görüntülemesinde koordinat bulma. Yavaş ve pahalıdır; kaydederken bir kez yapın.
• Canlı alan adını anahtar kısıtlamalarına eklemeyi unutmak. Önizlemede çalışır, üretimde boş gri bir kutu olur.
• Yalnızca harita olan yerleşimler. Yalnız iğneler küçük ekranlarda zahmetlidir ve erişilebilir değildir.
• Kümeleme olmadan yüzlerce iğne. Okunamaz ve yavaştır.
• Eksik atıf. Çoğu harita ve karo sağlayıcısı atıf ister; gizlemek şartlarını ihlal eder.
• Sayfa yüklenirken konum istemek. Yalnızca kullanıcı “Yakınımda”ya dokunduğunda sorun.

Kontrol listesi

• İş için doğru harita türü seçildi
• Tarayıcı anahtarı alan adlarınızla ve gerekli API’lerle kısıtlı
• Sunucu tarafı anahtarlar gizli bilgilerde
• Koordinatlar veritabanında, bir kez koordinat bulunmuş olarak saklanıyor
• Sonuçlar ayrıca bir liste olarak da gösteriliyor
• Çok sayıda iğne için kümeleme var
• Atıf görünür
• Sağlayıcıyla bir bütçe uyarısı belirlendi
• Yayınlanmış alan adında ve telefonda test edildi

Mythex ile harita ekleme

Mythex’te yerleşik bir harita entegrasyonu yoktur; kendi sağlayıcı anahtarınızı getirirsiniz, bunu bir proje gizli bilgisi olarak eklersiniz (ya da ajan bir gizli bilgi kartı gösterdiğinde yapıştırırsınız) ve haritayı sohbette istersiniz; Herhangi bir API’yi entegre et rehberinde anlatıldığı gibi. Koordinatlar projenin veritabanına gider. Anahtarın web sitesi kısıtlamalarına hem önizleme hem de yayınlanmış alan adlarınızı eklemeyi unutmayın ve gizli bilgileri değiştirdikten sonra yeniden yayınlayın.

Haritalar genellikle arama ve listelerin yanında yer alır: bkz. uygulamanıza arama nasıl eklenir, dizin sitesi nasıl oluşturulur ve küçük işletme sitesi nasıl oluşturulur.

Sorular