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:

  • Harita modunuz aracılığıyla MAP_MODE.
  • API anahtarınızla YOUR_API_KEY. Daha fazla bilgi için API anahtarı alma bölümüne bakın.
  • 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'in height ve width özellikleriyle kontrol edin. Ö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ği ek özellikleri kullanı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 çalışabilmesi için tarayıcının tam URL'yi istekle birlikte Referer başlığı olarak göndermesine izin veren referrerpolicy="no-referrer-when-downgrade" özelliği.

iframe'i kendi web sitenizin yapısına ve tasarımına uyacak şekilde yeniden boyutlandırabilirsiniz, ancak ziyaretçiler genellikle büyük haritalarla etkileşim kurmayı daha kolay bulmaktadır. 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 referrer meta etiketi no-referrer veya same-origin olarak ayarlanmışsa 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.

Haritadaki reklamlar

Maps Embed API, harita üzerinde reklamcılığı içerebilir. Herhangi 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 adresle ilgili bir harita raptiyesi görüntüler (ör. önemli bir nokta, işletme, coğrafi özellik veya kasaba).
  • 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: Belirli konumlardan etkileşimli panoramik görüntüler 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, "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.
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 parçalarında etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Ziyaretçiler, varsayılan olarak haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil parça grubu için desteklenmiyorsa bu parça grubu için varsayılan dil 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.

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 parçalarında etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Ziyaretçiler, varsayılan olarak haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil parça grubu için desteklenmiyorsa bu parça grubu için varsayılan dil 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.

directions modu

Aşağıdaki örnekte, Oslow ile Telemark, Norveç arasındaki yolu, mesafeyi ve seyahat süresini görüntülemek için ücretli geçişlerden ve otoyollardan kaçınarak 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 tariflerinin görüntüleneceğ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. 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.
waypoints İsteğe bağlı Kalkış ve hedef arasında yol tarifini yönlendirmek için bir veya daha fazla ara yeri belirtir. Yer adı, adres 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 yöntemini tanımlar. Herhangi bir mod belirtilmezse Maps Embed API, belirtilen rota için 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 (kullanılabilir olduğunda bisiklet yolları ve tercih edilen sokaklar üzerinden geçer), 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 parçalarında etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Ziyaretçiler, varsayılan olarak haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil parça grubu için desteklenmiyorsa bu parça grubu için varsayılan dil 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.

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ı tarafından katkıda bulunulan fotoğraf küreleri ve Street View özel koleksiyonları da mevcuttur.

Her Street View panoraması, tek bir konumdan tam 360 derece görünüm sunar. Resimler, 360 derece yatay görünüm (tam sarmal) ve 180 derece dikey görünüm (dümdüzden aşağıya doğru) içerir. streetview modu, elde edilen panoramayı merkezinde bir kamera olmak üzere küre şeklinde oluşturan bir görüntüleyici sağlar. Kameranın yakınlaştırma ve yönünü kontrol etmek için kamerayı kullanabilirsiniz.

Şu 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 konumda fotoğrafı çekilen panoramayı görüntüler. Street View görüntüleri düzenli aralıklarla yenilendiği ve fotoğraflar her seferinde biraz farklı konumlardan çekilebildiği için, görüntüler güncellendiğinde konumunuz farklı bir panoramaya yansıtılabilir.

  • pano belirli bir panorama kimliğidir. Bir pano belirtirseniz location de 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ü Kuzey'den saat yönünde derece cinsinden gösterir. -180° ile 360° arasındaki 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ı doğru, negatif değerler de kamera açısını aşağı iter. 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 resimde büyük olasılıkla, yatay olmayan bir varsayılan perde gösterilir. -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 parçalarında etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Ziyaretçiler, varsayılan olarak haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil parça grubu için desteklenmiyorsa bu parça grubu için varsayılan dil 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ı sınırlandırmak 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 parçalarında etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Ziyaretçiler, varsayılan olarak haritayı kendi dillerinde görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil parça grubu için desteklenmiyorsa bu parça grubu için varsayılan dil 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.

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 dokümanlarına 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 kaynağı olarak New York Belediye Binası'nı belirtir: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius, belirtilen enlem ve boylama merkeze alınarak bir panorama aranacağı metre cinsinden belirtilen bir yarıçap belirler. Geçerli değerler, negatif olmayan tam sayılardır. Varsayılan değer 50'dir.

  • source, Street View aramalarını seçili kaynaklarla sınırlandırır. Valid values are:

    • 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.