Harita yerleştirme

Bu kılavuzda, web sayfanıza nasıl etkileşimli harita yerleştireceğiniz gösterilmektedir.

Maps Embed API URL'sini oluşturma

Aşağıda, Maps Embed API'yi yükleyen örnek bir URL verilmiştir:

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

Değiştir:

  • Harita modunuz ile MAP_MODE.
  • YOUR_API_KEY kısmını API anahtarınızla değiştirin. Daha fazla bilgi için API anahtarı alma başlıklı makaleyi inceleyin.
  • PARAMETERS, harita modunuz için gerekli ve isteğe bağlı parametrelerle değiştirin.

URL'yi bir iFrame'e ekleme

Web sayfanızda Maps Embed API'yi kullanmak için oluşturduğunuz URL'yi bir iframe'in src özelliğinin değeri olarak ayarlayın. Haritanın boyutunu iframe'in height ve width özellikleriyle kontrol edin. Örneğin:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="strict-origin-when-cross-origin"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

Yukarıdaki iframe örneğinde aşağıdaki ek özellikler kullanılmıştır:

  • Haritanın belirli bölümlerinin tam ekran olmasına izin veren allowfullscreen özelliği.
  • Haritanın etrafındaki standart iframe kenarlığını kaldırmak için frameborder="0" ve style="border:0" özellikleri.
  • referrerpolicy="strict-origin-when-cross-origin" özelliği, tarayıcının web sitenizin alan adını Google'a Referer üstbilgisi olarak göndermesini sağlar. Bu sayede, API anahtarı kısıtlamaları isteği doğrulayabilir ve belirli sayfa yollarınız gizli kalır.

iframe'i kendi web sitenizin yapısına ve tasarımına uyacak şekilde yeniden boyutlandırabilirsiniz ancak ziyaretçilerin genellikle daha büyük haritalarla etkileşim kurmayı daha kolay bulduğunu görüyoruz. Yerleştirilmiş haritaların, her iki boyutta da 200 pikselden küçük boyutlarda desteklenmediğini unutmayın.

Yönlendiren bilgileri ve API anahtarı kısıtlamaları

Barındırma web sitesinde no-referrer veya same-origin olarak ayarlanmış bir referrer meta etiketi varsa tarayıcı, Referer üstbilgisini Google'a göndermez. Bu durum, API anahtarı kısıtlamanızın istekleri reddetmesine neden olabilir. Kısıtlamanın düzgün çalışması için iframe'e bir referrerpolicy özelliği ekleyerek Referer başlıklarının Google'a gönderilmesine açıkça izin verin (yukarıdaki örnekte gösterildiği gibi).

  • strict-origin-when-cross-origin (Önerilen): Google'a yalnızca temel alan adınızı (ör. https://example.com/) gönderir. Bu sayede, API anahtarı kısıtlamalarının çalışmasına izin verirken belirli sayfa yollarınızı gizli tutabilirsiniz.
  • no-referrer-when-downgrade (Eski): Belirli sayfa yolları ve sorgu parametreleri (ör. https://example.com/contact?user=123) dahil olmak üzere URL'nin tamamını gönderir.

Referrer-Policy üstbilgisi hakkında daha fazla bilgi edinin.

Harita modlarını seçme

İstek URL'nizde kullanmak için aşağıdaki harita modlarından birini belirtebilirsiniz:

  • place: Belirli bir yer veya adreste (ör. önemli bir yer, işletme, coğrafi özellik veya kasaba) harita raptiyesi gösterir.
  • view: İşaretçi veya yol tarifi içermeyen bir harita döndürür.
  • directions: Haritada belirtilen iki veya daha fazla nokta arasındaki yolun yanı sıra mesafe ve seyahat süresini gösterir.
  • streetview: Belirlenen konumlardan etkileşimli panoramik görünümler gösterir.
  • search: Görünür harita bölgesinde yapılan bir aramanın sonuçlarını gösterir.

place modu

Aşağıdaki URL, Eyfel Kulesi'nde bir harita işaretçisi göstermek için place harita modunu kullanır:

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

Aşağıdaki parametreleri kullanabilirsiniz:

Parametre Tür Açıklama Kabul edilen değerler
q Zorunlu Harita işaretçisinin konumunu tanımlar. URL çıkışlı yer adı, adres, Plus Code veya yer kimliği. Maps Embed API, boşlukları kodlarken hem + hem de %20 kodlamasını destekler. Örneğin, "City Hall, New York, NY" adresini City+Hall,New+York,NY veya "849VCWC8+R9" Plus Code'unu 849VCWC8%2BR9 olarak dönüştürün.
center İsteğe bağlı Harita görünümünün merkezini tanımlar. Virgülle ayrılmış enlem ve boylam değerini kabul eder. Örneğin: 37.4218,-122.0840.
zoom İsteğe bağlı Haritanın ilk yakınlaştırma seviyesini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) arasında değişen değerler. Üst sınır, seçilen konumda mevcut olan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita karolarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita parçalarındaki etiketlerin gösterimi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke karoları için desteklenir. İstenen dil, karo grubu için desteklenmiyorsa karo grubunun varsayılan dili kullanılır.
region İsteğe bağlı Jeopolitik hassasiyetlere göre gösterilecek uygun sınırları ve etiketleri tanımlar. Tanıdık ccTLD ("üst düzey alan") iki karakterli değerlerle eşlenen iki karakterli (sayısal olmayan) unicode bölge alt etiketi olarak belirtilen bir bölge kodunu kabul eder. Desteklenen bölgeler için Google Haritalar Platformu Kapsam Ayrıntıları'na bakın.

view modu

Aşağıdaki örnekte, haritanın uydu görünümünü göstermek için view modu ve isteğe bağlı maptype parametresi kullanılmaktadır:

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Aşağıdaki parametreleri kullanabilirsiniz:

Parametre Tür Açıklama Kabul edilen değerler
center Zorunlu Harita görünümünün merkezini tanımlar. Virgülle ayrılmış enlem ve boylam değerini kabul eder. Örneğin: 37.4218,-122.0840.
zoom İsteğe bağlı Haritanın ilk yakınlaştırma seviyesini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) arasında değişen değerler. Üst sınır, seçilen konumda mevcut olan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita karolarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita parçalarındaki etiketlerin gösterimi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke karoları için desteklenir. İstenen dil, karo grubu için desteklenmiyorsa karo grubunun varsayılan dili kullanılır.
region İsteğe bağlı Jeopolitik hassasiyetlere göre gösterilecek uygun sınırları ve etiketleri tanımlar. Tanıdık ccTLD ("üst düzey alan") iki karakterli değerlerle eşlenen iki karakterli (sayısal olmayan) unicode bölge alt etiketi olarak belirtilen bir bölge kodunu kabul eder. Desteklenen bölgeler için Google Haritalar Platformu Kapsam Ayrıntıları'na bakın.

directions modu

Aşağıdaki örnekte, Oslo ile Telemark (Norveç) arasındaki yolu, mesafeyi ve ücretli geçişler ile otoyollardan kaçınarak seyahat süresini göstermek için directions modu kullanılmaktadır.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

Aşağıdaki parametreleri kullanabilirsiniz:

Parametre Tür Açıklama Kabul edilen değerler
origin Zorunlu Yol tarifinin gösterileceği başlangıç noktasını tanımlar. URL çıkışlı yer adı, adres, Plus Code, enlem/boylam koordinatları veya yer kimliği. Maps Embed API, boşlukları kodlarken hem + hem de %20 kodlamasını destekler. Örneğin, "City Hall, New York, NY" adresini City+Hall,New+York,NY veya "849VCWC8+R9" Plus Code'unu 849VCWC8%2BR9 olarak dönüştürün.
destination Zorunlu Yol tarifinin bitiş noktasını tanımlar. URL çıkışlı yer adı, adres, Plus Code, enlem/boylam koordinatları veya yer kimliği. Maps Embed API, boşlukları kodlarken hem + hem de %20 kodlamasını destekler. Örneğin, "City Hall, New York, NY" adresini City+Hall,New+York,NY veya "849VCWC8+R9" Plus Code'unu 849VCWC8%2BR9 olarak dönüştürün.
waypoints İsteğe bağlı Başlangıç ve varış noktası arasında yol tarifi almak için bir veya daha fazla ara yer belirtir. Yer adı, adres veya yer kimliği. Yerleri ayırmak için dikey çizgi karakteri (|) kullanarak birden fazla ara nokta belirtebilirsiniz (ör. Berlin,Germany|Paris,France). En fazla 20 ara nokta belirtebilirsiniz.
mode İsteğe bağlı Seyahat yöntemini tanımlar. Mod belirtilmezse Maps Embed API, belirtilen rota için en alakalı modlardan birini veya daha fazlasını gösterir. driving, walking (mümkün olduğunda yaya yollarını ve kaldırımları tercih eder), bicycling (mümkün olduğunda bisiklet yollarını ve tercih edilen sokakları kullanan rotaları tercih eder), transit veya flying.
avoid İsteğe bağlı Yol tariflerinde kaçınılacak özellikleri belirtir. Bu seçeneğin, kısıtlanmış özellikleri içeren rotaları engellemediğini, sonucu daha uygun rotalara yönlendirdiğini unutmayın. tolls, ferries ve/veya highways. Birden fazla değeri dikey çizgi karakteriyle ayırın (ör. avoid=tolls|highways).
units İsteğe bağlı Sonuçlarda mesafeler gösterilirken ölçüm yöntemini (metrik veya İngiliz ölçü birimi) belirtir. units belirtilmezse kullanılacak birimleri sorgunun origin ülkesi belirler. metric veya imperial
center İsteğe bağlı Harita görünümünün merkezini tanımlar. Virgülle ayrılmış enlem ve boylam değerini kabul eder. Örneğin: 37.4218,-122.0840.
zoom İsteğe bağlı Haritanın ilk yakınlaştırma seviyesini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) arasında değişen değerler. Üst sınır, seçilen konumda mevcut olan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita karolarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita parçalarındaki etiketlerin gösterimi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke karoları için desteklenir. İstenen dil, karo grubu için desteklenmiyorsa karo grubunun varsayılan dili kullanılır.
region İsteğe bağlı Jeopolitik hassasiyetlere göre gösterilecek uygun sınırları ve etiketleri tanımlar. Tanıdık ccTLD ("üst düzey alan") iki karakterli değerleriyle eşlenen iki karakterli (sayısal olmayan) unicode bölge alt etiketi olarak belirtilen bir bölge kodunu kabul eder. Desteklenen bölgeler için Google Haritalar Platformu Kapsam Ayrıntıları'na bakın.

streetview modu

Maps Embed API, Street View görüntülerini kapsama alanındaki belirli konumlardan etkileşimli panoramalar olarak göstermenize olanak tanır. Kullanıcıların katkıda bulunduğu Albümler ve Street View özel koleksiyonları da mevcuttur.

Her Street View panoraması, tek bir konumdan tam 360 derecelik bir görünüm sağlar. Resimler 360 derecelik yatay görünüme (tam bir çevreleme) ve 180 derecelik dikey görünüme (tam yukarıdan tam aşağıya) sahiptir. streetview modu, ortaya çıkan panoramayı merkezinde kamera bulunan bir küre olarak oluşturan bir görüntüleyici sağlar. Kamerayı kullanarak yakınlaştırmayı ve kameranın yönünü kontrol edebilirsiniz.

Aşağıdaki streetview modu panoramasına bakın:

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

Aşağıdaki URL parametrelerinden biri gereklidir:

  • location, virgülle ayrılmış değerler (46.414382,10.013988) olarak bir enlem ve boylam kabul eder. API, bu konuma en yakın yerde çekilen panoramayı gösterir. Street View görüntüleri düzenli olarak yenilendiğinden ve fotoğraflar her seferinde biraz farklı konumlardan çekilebileceğinden, görüntüler güncellendiğinde konumunuz farklı bir panoramaya tutturulabilir.

  • pano, belirli bir panorama kimliğidir. pano belirtirseniz location da belirtebilirsiniz. location, yalnızca API panorama kimliğini bulamazsa kullanılır.

Aşağıdaki URL parametreleri isteğe bağlıdır:

Parametre Tür Açıklama Kabul edilen değerler
heading İsteğe bağlı Kameranın pusula yönünü, kuzeyden saat yönünde derece cinsinden gösterir. -180° ile 360° arasında derece cinsinden değer
pitch İsteğe bağlı Kameranın yukarı veya aşağı açısını belirtir. Pozitif değerler kamerayı yukarı, negatif değerler ise aşağı doğru açılı hale getirir. Varsayılan 0° eğim, görüntünün yakalandığı andaki kamera konumuna göre ayarlanır. Bu nedenle, 0°'lik bir eğim genellikle yataydır ancak her zaman böyle değildir. Örneğin, bir tepede çekilen bir resim muhtemelen yatay olmayan varsayılan bir eğim gösterir. -90° ile 90° arasında derece cinsinden değer
fov İsteğe bağlı görüntünün yatay görüş alanını belirler. Varsayılan olarak 90°'dir. Sabit boyutlu bir görüntü alanıyla çalışırken görüş alanı, yakınlaştırma seviyesi olarak kabul edilebilir. Daha küçük sayılar, daha yüksek bir yakınlaştırma seviyesini gösterir. 10° - 100° aralığında derece cinsinden değer
center İsteğe bağlı Harita görünümünün merkezini tanımlar. Virgülle ayrılmış enlem ve boylam değerini kabul eder. Örneğin: 37.4218,-122.0840.
zoom İsteğe bağlı Haritanın ilk yakınlaştırma seviyesini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) arasında değişen değerler. Üst sınır, seçilen konumda mevcut olan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita karolarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita parçalarındaki etiketlerin gösterimi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke karoları için desteklenir. İstenen dil, karo grubu için desteklenmiyorsa karo grubunun varsayılan dili kullanılır.
region İsteğe bağlı Jeopolitik hassasiyetlere göre gösterilecek uygun sınırları ve etiketleri tanımlar. Tanıdık ccTLD ("üst düzey alan") iki karakterli değerleriyle eşlenen iki karakterli (sayısal olmayan) unicode bölge alt etiketi olarak belirtilen bir bölge kodunu kabul eder. Desteklenen bölgeler için Google Haritalar Platformu Kapsam Ayrıntıları'na bakın.

search modu

Search modu, görünür harita bölgesindeki bir aramanın sonuçlarını gösterir. Arama terimine bir konum (record+stores+in+Seattle) ekleyerek veya aramayı sınırlandırmak için center ve zoom parametresi ekleyerek arama için bir konum tanımlamanız önerilir.

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

Aşağıdaki parametreleri kullanabilirsiniz:

Parametre Tür Açıklama Kabul edilen değerler
q Zorunlu Arama terimini tanımlar. in+Seattle veya near+98033 gibi coğrafi kısıtlamalar içerebilir.
center İsteğe bağlı Harita görünümünün merkezini tanımlar. Virgülle ayrılmış enlem ve boylam değerini kabul eder. Örneğin: 37.4218,-122.0840.
zoom İsteğe bağlı Haritanın ilk yakınlaştırma seviyesini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) arasında değişen değerler. Üst sınır, seçilen konumda mevcut olan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita karolarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita parçalarındaki etiketlerin gösterimi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke karoları için desteklenir. İstenen dil, karo grubu için desteklenmiyorsa karo grubunun varsayılan dili kullanılır.
region İsteğe bağlı Jeopolitik hassasiyetlere göre gösterilecek uygun sınırları ve etiketleri tanımlar. Tanıdık ccTLD ("üst düzey alan") iki karakterli değerleriyle eşlenen iki karakterli (sayısal olmayan) unicode bölge alt etiketi olarak belirtilen bir bölge kodunu kabul eder. Desteklenen bölgeler için Google Haritalar Platformu Kapsam Ayrıntıları'na bakın.

Yer kimliği parametreleri

Maps Embed API, yer adı veya adres sağlamak yerine yer kimliklerinin kullanılmasını destekler. Yer kimlikleri, bir yeri benzersiz şekilde tanımlamanın güvenilir bir yoludur. Daka fazla bilgi için Places API (New) belgelerine bakın.

Maps Embed API, aşağıdaki URL parametreleri için yer kimliklerini kabul eder:

  • q
  • origin
  • destination
  • waypoints

Yer kimliği kullanmak için önce place_id: önekini eklemeniz gerekir. Aşağıdaki kod, yol tarifi isteğinin başlangıç noktası olarak New York City Hall'u belirtir: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius, verilen enlem ve boylamı merkez alan bir panorama aramak için metre cinsinden belirtilen bir yarıçap ayarlar. Geçerli değerler, sıfırdan büyük tam sayılardır. Varsayılan değer 50'dir.

  • source, Street View aramalarını seçili kaynaklarla sınırlar. Geçerli değerler şunlardır:

    • default, Street View için varsayılan kaynakları kullanır. Aramalar belirli kaynaklarla sınırlı değildir.
    • outdoor, aramaları dış mekan koleksiyonlarıyla sınırlandırır. İç mekan koleksiyonları arama sonuçlarına dahil edilmez. Belirtilen konumda dış mekan panoramaları bulunmayabilir. Ayrıca, aramanın yalnızca iç mekan veya dış mekan olduğu belirlenebilen panoramaları döndürdüğünü unutmayın. Örneğin, iç mekanda mı yoksa dış mekanda mı olduğu bilinmediği için PhotoSphere'ler döndürülmez.