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"
vestyle="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 verenreferrerpolicy="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
¢er=-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. Birpano
belirtirsenizlocation
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.