Bu kılavuzda, web sayfanıza etkileşimli bir haritanın nasıl yerleştirileceği gösterilmektedir.
Maps Embed API URL'sini Oluşturma
Aşağıda, Maps Embed API'yi yükleyen bir örnek URL gösterilmektedir:
https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS
Değiştir:
- Harita modunuzla MAP_MODE.
- API anahtarınızla YOUR_API_KEY. Daha fazla bilgi için API anahtarı alma bölümüne bakın.
- Harita modunuz için zorunlu ve isteğe bağlı parametreleri PARAMETERS olarak ayarlayın.
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="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:
- Belirli harita parçalarının tam ekran moduna geçmesini sağlayan
allowfullscreen
özelliği. - Standart iframe sınırını haritanın çevresinden kaldırmak için kullanılan
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çilerin büyük haritalarla etkileşimde bulunmayı genellikle daha kolay bulduğunu gördük. Yerleştirilmiş haritaların her iki boyutta da 200 pikselin altındaki bir boyutun desteklenmediğini unutmayın.
API anahtarı kısıtlamaları
Barındırma web sitesinin referrer
meta etiketi no-referrer
veya same-origin
olarak ayarlanmışsa tarayıcı Referer
üstbilgisini Google'a göndermez. Bu, API anahtarı kısıtlamanızın istekleri reddetmesine neden olabilir. Kısıtlamanın düzgün çalışması için, Referer
üst bilgilerinin Google'a gönderilmesine açıkça izin vermek amacıyla iframe'e referrerpolicy
özelliği ekleyin (yukarıdaki örnekte olduğu gibi).
Haritadaki reklamlar
Maps Embed API, harita üzerinde reklamlar içerebilir. Herhangi bir haritada gösterilen reklam biçimi ve reklam kümesi önceden haber verilmeksizin değiştirilebilir.
Harita modlarını seçme
İstek URL'nizde kullanılacak aşağıdaki harita modlarından birini belirtebilirsiniz:
place
: Önemli nokta, işletme, coğrafi özellik veya kasaba gibi belirli bir yer veya adreste bir harita raptiyesi görüntüler.view
: İşaretçi veya yol tarifi içermeyen bir haritayı döndürür.directions
: Haritada belirtilen iki veya daha fazla nokta arasındaki yolu, mesafe 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 yapılan arama sonuçlarını gösterir.
place
modu
Aşağıdaki URL, Eyfel Kulesi'nde bir harita işaretleyici 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şluklara çıkış yaparken hem + hem de %20 öğelerini destekler. Örneğin, "Belediye, New York, NY" değerini City+Hall,New+York,NY olarak veya artı kodları "849VCWC8+R9" kodunu 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ğerlerini 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) arasında değişen değerlerdir. Üst sınır, seçilen konumda kullanılabilen harita verilerine bağlı olarak değişebilir. |
maptype |
İsteğe bağlı | Yüklenecek harita döşemelerinin türünü tanımlar. | roadmap (varsayılan) veya satellite |
language |
İsteğe bağlı | Kullanıcı arayüzü öğeleri ve harita parçaları üzerinde etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir; istenen 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ı | Jeo-politik hassasiyetlere göre görüntülenecek uygun sınırları ve etiketleri tanımlar. | İki karakterli (sayısal olmayan) bir unicode bölgesi alt etiketi eşlemesi olarak belirtilen bir bölge kodunu, bilinen ccTLD ("üst düzey alan") değerleriyle eşleyerek 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ılmıştı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ğerlerini 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) arasında değişen değerlerdir. Üst sınır, seçilen konumda kullanılabilen harita verilerine bağlı olarak değişebilir. |
maptype |
İsteğe bağlı | Yüklenecek harita döşemelerinin türünü tanımlar. | roadmap (varsayılan) veya satellite |
language |
İsteğe bağlı | Kullanıcı arayüzü öğeleri ve harita parçaları üzerinde etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir; istenen 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ı | Jeo-politik hassasiyetlere göre görüntülenecek uygun sınırları ve etiketleri tanımlar. | İki karakterli (sayısal olmayan) bir unicode bölgesi alt etiketi eşlemesi olarak belirtilen bir bölge kodunu, bilinen ccTLD ("üst düzey alan") değerleriyle eşleyerek kabul eder. Desteklenen bölgeler için Google Haritalar Platformu Kapsam Ayrıntıları'na bakın. |
directions
modu
Aşağıdaki örnekte, ücretli geçişler ve otoyollar kullanılmadan Oslow ile Telemark, Norveç arasındaki yolu, mesafe ve seyahat süresini görüntülemek 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 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şluklara çıkış yaparken hem + hem de %20 öğelerini destekler. Örneğin, "Belediye, New York, NY" değerini City+Hall,New+York,NY olarak veya artı kodları "849VCWC8+R9" kodunu 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şluklara çıkış yaparken hem + hem de %20 öğelerini destekler. Örneğin, "Belediye, New York, NY" değerini City+Hall,New+York,NY olarak veya artı kodları "849VCWC8+R9" kodunu 849VCWC8%2BR9 olarak dönüştürün. |
waypoints |
İsteğe bağlı | Başlangıç noktası ve hedef arasında yol tariflerini yönlendirmek için bir veya daha fazla ara yer belirtir. | Yer adı, adres veya yer kimliği.
Yerleri ayırmak için dikey çizgi karakteri (|) 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. Mod belirtilmezse Maps Embed API, belirtilen rota için en alakalı modlardan bir veya daha fazlasını gösterir. | driving , walking (mümkün olduğunda yaya yollarını ve kaldırımları tercih eder), bicycling (varsa bisiklet yolları ve tercih edilen sokaklar üzerinden rotalar) transit veya flying . |
avoid |
İsteğe bağlı | Yol tariflerinde kaçınılması gereken özellikleri belirtir. Bunun, kısıtlanmış özellikleri içeren rotaları engellemediğini, sonuca daha uygun 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 sorgunun origin ülkesi kullanılacak birimleri 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ğerlerini 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) arasında değişen değerlerdir. Üst sınır, seçilen konumda kullanılabilen harita verilerine bağlı olarak değişebilir. |
maptype |
İsteğe bağlı | Yüklenecek harita döşemelerinin türünü tanımlar. | roadmap (varsayılan) veya satellite |
language |
İsteğe bağlı | Kullanıcı arayüzü öğeleri ve harita parçaları üzerinde etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir; istenen 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ı | Jeo-politik hassasiyetlere göre görüntülenecek uygun sınırları ve etiketleri tanımlar. | İki karakterli (sayısal olmayan) bir unicode bölgesi alt etiketi eşlemesi olarak belirtilen bir bölge kodunu, bilinen ccTLD ("üst düzey alan") değerleriyle eşleyerek 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 belirlenmiş konumlardan etkileşimli panoramalar olarak görüntülemenizi sağlar. Kullanıcıların katkıda bulunduğu fotoğraf küreleri ve Street View özel koleksiyonları da mevcuttur.
Her bir Street View panoraması, tek bir konumdan tam 360 derecelik görünüm
sunar. Resimler 360 derece yatay görünüm (tam sarmalama) ve 180 derece dikey görünüm (düzden aşağı doğru) içerir. streetview
modu, ortaya çıkan panoramayı merkezinde kamera bulunan bir küre halinde oluşturan bir görüntüleyici sunar. Kameranın yakınlaştırmasını ve yönünü
kontrol etmek için kamerayı değiştirebilirsiniz.
Ş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ı 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österir. Street View görüntüleri düzenli olarak yenilendiği ve fotoğraflar her seferinde biraz farklı konumlardan çekilebileceği için, görüntüler güncellendiğinde konumunuzun farklı bir panoramaya tutturulması mümkündür.pano
belirli bir panorama kimliğidir.pano
belirtirsenizlocation
belirtebilirsiniz.location
, yalnızca API'nin panorama kimliğini bulamaması durumunda 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 istikametini, saat yönünde kuzeyden derece cinsinden belirtir. | -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 ise kamerayı aşağı doğru döndürür. Varsayılan 0° dönüş açısı, kameranın görüntü çekildiği andaki konumuna göre ayarlanır. Bu nedenle, 0°'lik bir dönüş çoğu zaman yataydır ancak her zaman yatay değildir. Örneğin, tepede çekilen bir resim büyük olasılıkla yatay olmayan bir varsayılan perde gösterir. | -90° ile 90° arasında derece cinsinden değer |
fov |
İsteğe bağlı | resmin yatay görüş alanını belirler. Varsayılan olarak 90°'ye ayarlanır. Sabit boyutlu bir görüntü alanı söz konusu olduğunda görüş alanı, yakınlaştırma düzeyi olarak kabul edilebilir. Daha küçük sayılar ise daha yüksek bir yakınlaştırma düzeyini belirtir. | 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ğerlerini 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) arasında değişen değerlerdir. Üst sınır, seçilen konumda kullanılabilen harita verilerine bağlı olarak değişebilir. |
maptype |
İsteğe bağlı | Yüklenecek harita döşemelerinin türünü tanımlar. | roadmap (varsayılan) veya satellite |
language |
İsteğe bağlı | Kullanıcı arayüzü öğeleri ve harita parçaları üzerinde etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir; istenen 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ı | Jeo-politik hassasiyetlere göre görüntülenecek uygun sınırları ve etiketleri tanımlar. | İki karakterli (sayısal olmayan) bir unicode bölgesi alt etiketi eşlemesi olarak belirtilen bir bölge kodunu, bilinen ccTLD ("üst düzey alan") değerleriyle eşleyerek 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ölgesinde yapılan bir aramaya ilişkin sonuçları görüntüler.
Arama terimine bir konum ekleyerek (record+stores+in+Seattle
) 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 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ğerlerini 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) arasında değişen değerlerdir. Üst sınır, seçilen konumda kullanılabilen harita verilerine bağlı olarak değişebilir. |
maptype |
İsteğe bağlı | Yüklenecek harita döşemelerinin türünü tanımlar. | roadmap (varsayılan) veya satellite |
language |
İsteğe bağlı | Kullanıcı arayüzü öğeleri ve harita parçaları üzerinde etiketlerin görüntülenmesi için kullanılacak dili tanımlar. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir; istenen 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ı | Jeo-politik hassasiyetlere göre görüntülenecek uygun sınırları ve etiketleri tanımlar. | İki karakterli (sayısal olmayan) bir unicode bölgesi alt etiketi eşlemesi olarak belirtilen bir bölge kodunu, bilinen ccTLD ("üst düzey alan") değerleriyle eşleyerek kabul eder. Desteklenen bölgeler için Google Haritalar Platformu Kapsam Ayrıntıları'na bakın. |
Yer kimliği parametreleri
Maps Embed API, bir yer adı veya adres 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
Bir 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 göre ortalama olarak 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 açık hava panoramalarının olmayabileceğini unutmayın. Ayrıca, aramanın yalnızca kapalı mı yoksa açık mı olduğunun belirlenmesinin mümkün olduğu panoramaları döndürdüğünü de unutmayın. Örneğin, iç mekanda mı yoksa açık alanda mı oldukları bilinmediği için Photo Sphere'ler döndürülmez.