Bir harita yerleştirme

Bu kılavuzda, etkileşimli bir haritayı web sayfanıza nasıl 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:

  • MAP_MODE harita modunuzu değiştirebilirsiniz.
  • API anahtarınızla YOUR_API_KEY. Daha fazla bilgi için API anahtarı alma başlıklı makaleyi inceleyin.
  • PARAMETERS ile eşleme modunuz için gerekli ve isteğe bağlı parametreleri ekleyin.

URL'yi bir iframe'e ekleme

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

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  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ılır:

  • Haritanın belirli bölümlerinin tam ekran moduna geçmesi için allowfullscreen özelliği.
  • Haritanın çevresinden standart iframe kenarlığını kaldıracak frameborder="0" ve style="border:0" özellikleri.
  • API anahtarı kısıtlamalarının düzgün şekilde çalışabilmesi için tarayıcının URL'nin tamamını istekle birlikte Referer üstbilgisi olarak göndermesine izin veren referrerpolicy="no-referrer-when-downgrade" mülkü.

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 tespit ettik. 200 pikselden küçük olan yerleştirilmiş haritaların her iki boyutta da desteklenmediğini unutmayın.

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 başlığını 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, yukarıdaki örnekte olduğu gibi iframe'e referrerpolicy özelliği ekleyerek Referer başlıklarının Google'a gönderilmesine açıkça izin verin.

Haritada reklamlar

Maps Embed API, harita üzerinde reklamcılık içerebilir. Belirli bir haritada gösterilen reklam biçimi ve reklam grubu, bildirimde bulunulmaksızın değiştirilebilir.

Harita modlarını seçme

İstek URL'nizde kullanmak üzere 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) bir 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 yolu, mesafeyi ve seyahat süresini gösterir.
  • streetview: Belirtilen konumlardan alınan etkileşimli panoramik görüntüleri gösterir.
  • search: Görünür harita bölgesinde bir aramanın sonuçlarını gösterir.

place modu

Aşağıdaki URL, Eyfel Kulesi'nde bir harita işaretleyicisi görüntülemek 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şaretleyicisinin konumunu tanımlar. URL çıkışlı yer adı, adres, artı kodu veya yer kimliği. Maps Embed API, boşluklardan çıkış yaparken hem + hem de %20 öğesini destekler. Örneğin, "City Hall, New York, NY"yi City+Hall,New+York,NY veya "849VCWC8+R9" kodlarını 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 düzeyini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) aralığında değişen değerler. Üst sınır, seçilen konumda bulunan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita parçalarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita karolarındaki etiketlerin görüntülenmesi 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; istenen belirli dil karo seti için desteklenmiyorsa söz konusu karo setinin varsayılan dili kullanılır.
region İsteğe bağlı Coğrafi hassasiyetlere dayalı olarak, görüntülenecek uygun sınırları ve etiketleri tanımlar. Bilinen ccTLD ("üst düzey alan") iki karakterli değerlerle eşleşen 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örüntülemek 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 düzeyini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) aralığında değişen değerler. Üst sınır, seçilen konumda bulunan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita parçalarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita karolarındaki etiketlerin görüntülenmesi 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; istenen belirli dil karo seti için desteklenmiyorsa söz konusu karo setinin varsayılan dili kullanılır.
region İsteğe bağlı Coğrafi hassasiyetlere dayalı olarak, görüntülenecek uygun sınırları ve etiketleri tanımlar. Tanınan ccTLD ("üst düzey alan") ile iki karakterlik (sayısal olmayan) unicode bölge alt etiketi eşlemesi olarak belirtilen 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 Norveç'in Telemark kenti arasındaki yolu, mesafeyi ve otoyollardan ve ücretli yollardan kaçınarak yolculuk 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, artı kodu, enlem/boylam koordinatları veya yer kimliği. Maps Embed API, boşluklardan çıkış yaparken hem + hem de %20 öğesini destekler. Örneğin, "Belediye Binası, New York, NY" kodunu City+Hall,New+York,NY olarak veya "849VCWC8+R9" artı kodlarını 849VCWC8%2BR9 olarak dönüştürün.
destination Zorunlu Yol tariflerinin bitiş noktasını tanımlar. URL çıkışlı yer adı, adres, artı kodu, enlem/boylam koordinatları veya yer kimliği. Haritalar İçe Aktarma API'si, boşluklardan kaçarken hem + hem de %20'ü destekler. Örneğin, "Belediye Binası, New York, NY" kodunu City+Hall,New+York,NY olarak veya "849VCWC8+R9" artı kodlarını 849VCWC8%2BR9 olarak dönüştürün.
waypoints İsteğe bağlı Kalkış ve varış noktası arasında yol tarifi için bir veya daha fazla ara konum belirtir. Yer adı, adresi veya yer kimliği. Yerleri ayırmak için dikey çizgi (|) kullanılarak birden çok ara nokta belirtilebilir (ör. Berlin,Germany|Paris,France). En fazla 20 ara nokta belirtebilirsiniz.
mode İsteğe bağlı Seyahat şeklini tanımlar. Hiçbir mod belirtilmezse Haritalar Embed API, belirtilen rotayla en alakalı modlardan birini veya daha fazlasını gösterir. driving, walking (mevcut olduğunda yaya yollarını ve kaldırımları tercih eder), bicycling (mevcut olduğunda bisiklet yolları ve tercih edilen sokaklardan rota oluşturur), transit veya flying.
avoid İsteğe bağlı Yol tariflerinde kaçınmanız gereken özellikleri belirtir. Bunun, kısıtlanmış özellikleri içeren rotaları engellemediğini, sonuçta daha elverişli rotalara ağırlık verdiğini unutmayın. tolls, ferries ve/veya highways. Birden çok değeri dikey çizgi karakteriyle ayırın (ör. avoid=tolls|highways).
units İsteğe bağlı Sonuçlarda mesafeleri görüntülerken ö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 düzeyini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) aralığında değişen değerler. Üst sınır, seçilen konumda bulunan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita parçalarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita karolarındaki etiketlerin görüntülenmesi 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; istenen belirli dil karo seti için desteklenmiyorsa söz konusu karo setinin varsayılan dili kullanılır.
region İsteğe bağlı Coğrafi hassasiyetlere dayalı olarak, görüntülenecek uygun sınırları ve etiketleri tanımlar. Bilinen ccTLD ("üst düzey alan") iki karakterli değerleriyle eşleşen 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 kapsam alanı genelinde belirlenen konumlardan etkileşimli panoramalar olarak görüntülemenizi sağlar. Kullanıcıların katkıda bulunduğu Photosphere'ler ve Street View özel koleksiyonları da kullanılabilir.

Her Street View panoraması, tek bir konumdan tam 360 derece görünüm sunar. Resimler 360 derece yatay görünüm (tam çevreleme) ve 180 derece dikey görünüm (doğrudan yukarıdan doğrudan aşağıya) içerir. streetview modu, elde edilen panoramayı merkezinde bir kamera olmak üzere küre şeklinde oluşturan bir görüntüleyici sağlar. Yakınlaştırmayı ve kameranın yönünü kontrol etmek için kamerayı hareket ettirebilirsiniz.

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, enlem ve boylam değerlerini virgülle ayrılmış değerler (46.414382,10.013988) olarak kabul eder. API, bu konuma en yakın şekilde çekilen panoramayı görüntüler. 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 konumunuzun farklı bir panoramaya sabitlenmesi mümkündür.

  • pano, belirli bir panorama kimliğidir. Bir pano belirtirseniz location de belirtebilirsiniz. location yalnızca API panorama kimliğini bulamıyorsa 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ü Kuzey'den 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 kamera açısını yukarı, negatif değerler de kamera açısını aşağı doğru döndürür. Varsayılan 0° perdesi, kameranın görüntü çekildiği andaki konumuna göre ayarlanır. Bu nedenle, 0°'lik bir perde her zaman olmasa da genellikle yataydır. Örneğin, bir tepede çekilen bir resimde yatay olmayan bir varsayılan eğim görülebilir. -90° ile 90° arasındaki derece cinsinden değer
fov İsteğe bağlı resmin 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 düzeyi olarak kabul edilebilir. Küçük sayılar daha yüksek bir yakınlaştırma düzeyini 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 düzeyini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) aralığında değişen değerler. Üst sınır, seçilen konumda bulunan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita parçalarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita karolarındaki etiketlerin görüntülenmesi 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; istenen belirli dil karo seti için desteklenmiyorsa söz konusu karo setinin varsayılan dili kullanılır.
region İsteğe bağlı Coğrafi hassasiyetlere dayalı olarak, görüntülenecek uygun sınırları ve etiketleri tanımlar. Tanınan ccTLD ("üst düzey alan") ile iki karakterlik (sayısal olmayan) unicode bölge alt etiketi eşlemesi olarak belirtilen bölge kodunu kabul eder. Desteklenen bölgeler için Google Haritalar Platformu Kapsam Ayrıntıları bölümüne bakın.

search modu

Search modu, aramayla ilgili sonuçları görünür harita bölgesinde gösterir. Arama terimine (record+stores+in+Seattle) konum ekleyerek veya aramayı bağlamak için center ve zoom parametreleri ekleyerek arama için bir konumun tanımlanması ö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 bir coğrafi kısıtlama 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 düzeyini ayarlar. 0 (tüm dünya) ile 21 (tek tek binalar) aralığında değişen değerler. Üst sınır, seçilen konumda bulunan harita verilerine bağlı olarak değişebilir.
maptype İsteğe bağlı Yüklenecek harita parçalarının türünü tanımlar. roadmap (varsayılan) veya satellite
language İsteğe bağlı Kullanıcı arayüzü öğeleri ve harita karolarındaki etiketlerin görüntülenmesi 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; istenen belirli dil karo seti için desteklenmiyorsa söz konusu karo setinin varsayılan dili kullanılır.
region İsteğe bağlı Coğrafi hassasiyetlere dayalı olarak, görüntülenecek uygun sınırları ve etiketleri tanımlar. Bilinen ccTLD ("üst düzey alan") iki karakterli değerleriyle eşleşen 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ı bölümüne bakın.

Yer kimliği parametreleri

Maps Embed API, bir yer adı veya adresi sağlamak yerine yer kimliklerinin kullanılmasını destekler. Yer kimlikleri, bir yeri benzersiz şekilde tanımlamanın sabit bir yoludur. Daha fazla bilgi için Google Places API belgelerini inceleyin.

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

  • q
  • origin
  • destination
  • waypoints

Yer kimliğini kullanmak için önce place_id: ön ekini eklemeniz gerekir. Aşağıdaki kod, yol tarifi isteğinin kaynağı olarak New York Belediye Binası'nı belirtir: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius, belirli bir enlem ve boylama odaklı 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ı açık hava koleksiyonlarıyla sınırlandırır. İç mekan koleksiyonları arama sonuçlarına dahil edilmez. Belirtilen konum için dış mekan panoramalarının mevcut olmayabileceğini unutmayın. Ayrıca, aramanın yalnızca, iç mekanda mı yoksa dışarıda mı olduğunun belirlenmesinin mümkün olduğu durumlarda panoramalar döndürdüğünü de unutmayın. Örneğin, içeride mi yoksa dışarıda mı olduğu bilinmediği için PhotoSphere'ler döndürülmez.