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.
- Haritanız için gerekli ve isteğe bağlı parametrelerle birlikte PARAMETERS yatırım yapmanız önemlidir.
URL'yi bir iframe'e ekleme
Maps Embed API'yi web sayfanızda kullanmak için kullandığınız URL'yi ayarlayın
bir iframe'in src
özelliğinin değeri olarak oluşturulur. Haritanın boyutunu
iframe'in height
ve width
özellikleri, ö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. - Standardı kaldırmak için
frameborder="0"
vestyle="border:0"
özellikleri iframe'in kenarlığını değiştirin. - Şuna izin verecek
referrerpolicy="no-referrer-when-downgrade"
özelliği: tam URL'yi istekle birlikteReferer
başlığı olarak göndermesini API anahtarı kısıtlamaları düzgün çalışabilir.
iframe'i kendi web sitenizin yapısına ve tasarımına uyacak şekilde yeniden boyutlandırabilirsiniz. Ancak ziyaretçilerin daha büyük haritalarla etkileşimde bulunmayı genellikle daha kolay bulduğunu görüyoruz. 200 pikselden küçük olan yerleşik haritaların boyutunu oluşturabilirsiniz.
API anahtarı kısıtlamaları
Barındırma web sitesinde no-referrer
olarak ayarlanmış bir referrer
meta etiketi varsa veya
same-origin
için tarayıcı Referer
üstbilgisini Google'a göndermez. Bu
API anahtarı kısıtlamanıza neden olabilir
değerini girin. Kısıtlamanın düzgün çalışması için
referrerpolicy
özelliğini iframe'e eklemek için yukarıdaki örnekte olduğu gibi,
Referer
üstbilgilerinin Google'a gönderilmesine izin ver.
Haritadaki reklamlar
Maps Embed API, harita üzerinde reklamcılığı içerebilir. Reklam biçimi ve herhangi bir haritada gösterilen reklam kümesi haber verilmeden 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 adresteki harita raptiyesini gösterir. önemli nokta, işletme, coğrafi özellik veya kasaba gibi bir yer gibi.view
: İşaretçi veya yol tarifi içermeyen bir harita döndürür.directions
: İki veya daha fazlası arasındaki yolu gösterir mesafe ve seyahat süresiyle birlikte haritada belirtilen noktaları gösterir.streetview
: şuradan etkileşimli panoramik görüntüleri gösterir: tanımlanmış konumlar.search
: Bir aramanın sonuçlarını görünür haritada gösterir bölge.
place
modu
Aşağıdaki URL, konumunda bir harita işaretleyiciyi görüntülemek için place
harita modunu kullanmaktadır
Eyfel Kulesi:
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 hem + hem de %20 desteği sağlar
emin olun. Örneğin, "Belediye Binası, New York, NY"yi dönüştür -
City+Hall,New+York,NY veya artı kodları "849VCWC8+R9" -
849VCWC8%2BR9 . |
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 arasında değişen değerler
(bağımsız binalar). Üst sınır, harita verilerine bağlı olarak değişebilir
seçilen konumda kullanılabilir. |
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 görüntülenmesi için kullanılacak dili tanımlar etiketleri kullanabilirsiniz. Varsayılan olarak, ziyaretçiler bir haritayı kendi başlarına görür dili'ne dokunun. Bu parametre yalnızca bazı ülke parçaları için desteklenir; eğer istenen dil karo grubu için desteklenmiyorsa o parça kümesi için varsayılan dil kullanılacak. | |
region |
İsteğe bağlı | Kullanıcı adı ve kimlik bilgilerine göre görüntülenecek uygun kenarlıkları ve etiketleri hassasiyetleri gözetiyor. | İki karakterlik (sayısal olmayan) belirtilen bölge kodunu kabul eder bilinen ccTLD'ye ("üst düzey alan") unicode bölgesi alt etiketi eşleme iki karakterli değerler sunmalıdır. Bkz. Google Haritalar Platformu Desteklenen bölgeler için Kapsam Ayrıntıları'nı tıklayın. |
view
modu
Aşağıdaki örnekte, şunlar için view
modu ve isteğe bağlı maptype
parametresi kullanılmaktadır:
haritanın uydu görünümünü görüntüleme:
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 arasında değişen değerler
(bağımsız binalar). Üst sınır, harita verilerine bağlı olarak değişebilir
seçilen konumda kullanılabilir. |
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 görüntülenmesi için kullanılacak dili tanımlar etiketleri kullanabilirsiniz. Varsayılan olarak, ziyaretçiler bir haritayı kendi başlarına görür dili'ne dokunun. Bu parametre yalnızca bazı ülke parçaları için desteklenir; eğer istenen dil karo grubu için desteklenmiyorsa o parça kümesi için varsayılan dil kullanılacak. | |
region |
İsteğe bağlı | Kullanıcı adı ve kimlik bilgilerine göre görüntülenecek uygun kenarlıkları ve etiketleri hassasiyetleri gözetiyor. | İki karakterlik (sayısal olmayan) belirtilen bölge kodunu kabul eder bilinen ccTLD'ye ("üst düzey alan") unicode bölgesi alt etiketi eşleme iki karakterli değerler sunmalıdır. Bkz. Google Haritalar Platformu Desteklenen bölgeler için Kapsam Ayrıntıları'nı tıklayın. |
directions
modu
Aşağıdaki örnekte, Oslow arasındaki yolu göstermek için directions
modu kullanılmaktadır
ve Telemark, Norveç, mesafe ve seyahat süresi gibi ücretli geçişler ile otoyolları kullanmadık.
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ğini girin.
Maps Embed API hem + hem de %20 desteği sağlar
emin olun. Örneğin, "Belediye Binası, New York, NY"yi dönüştür -
City+Hall,New+York,NY veya artı kodları "849VCWC8+R9" -
849VCWC8%2BR9 . |
destination |
Zorunlu | Yol tariflerinin bitiş noktasını tanımlar. | URL çıkışlı yer adı, adres, artı kodu, enlem/boylam
koordinatları veya yer kimliğini girin.
Maps Embed API hem + hem de %20 desteği sağlar
emin olun. Örneğin, "Belediye Binası, New York, NY"yi dönüştür -
City+Hall,New+York,NY veya artı kodları "849VCWC8+R9" -
849VCWC8%2BR9 . |
waypoints |
İsteğe bağlı | Aralarında yol tarifi oluşturulacak bir veya daha fazla ara yeri belirtir kalkış ve varış noktası. | Yer adı, adres veya yer kimliği.
Dikey çizgi karakteri (|) kullanılarak birden çok ara nokta belirtilebilir.
ayrı yerler (ör. Berlin,Germany|Paris,France ). Şunları yapabilirsiniz:
en fazla 20 ara nokta belirtin. |
mode |
İsteğe bağlı | Seyahat yöntemini tanımlar. Herhangi bir mod belirtilmezse Maps Embed API, web sayfası için en alakalı modlardan birini veya daha fazlasını gösterir. belirtilen rota. | driving , walking (yatay tercih edilir)
(varsa), bicycling (varsa)
(kullanılabilir olduğunda) bisiklet yolları ve tercih edilen sokaklar üzerinden geçen
yollar gösterilir.
transit veya flying . |
avoid |
İsteğe bağlı | Yol tariflerinde kaçınmanız gereken özellikleri belirtir. Aksi halde Kısıtlanmış özellikleri içeren rotaları engellemeyecek; her bir görev için daha elverişli rotalara yönlendirilebilir. | tolls , ferries ve/veya highways .
Birden çok değeri dikey çizgi karakteriyle ayırın (ör.
avoid=tolls|highways ) bilgileri gösterilir. |
units |
İsteğe bağlı | Gösterilirken ölçüm yöntemini, metriği veya İngiliz ölçü birimini belirtir
mesafeler var. units belirtilmezse
Kullanılacak birimleri, sorgudaki origin ülke 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 arasında değişen değerler
(bağımsız binalar). Üst sınır, harita verilerine bağlı olarak değişebilir
seçilen konumda kullanılabilir. |
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 görüntülenmesi için kullanılacak dili tanımlar etiketleri kullanabilirsiniz. Varsayılan olarak, ziyaretçiler bir haritayı kendi başlarına görür dili'ne dokunun. Bu parametre yalnızca bazı ülke parçaları için desteklenir; eğer istenen dil karo grubu için desteklenmiyorsa o parça kümesi için varsayılan dil kullanılacak. | |
region |
İsteğe bağlı | Kullanıcı adı ve kimlik bilgilerine göre görüntülenecek uygun kenarlıkları ve etiketleri hassasiyetleri gözetiyor. | İki karakterlik (sayısal olmayan) belirtilen bölge kodunu kabul eder bilinen ccTLD'ye ("üst düzey alan") unicode bölgesi alt etiketi eşleme iki karakterli değerler sunmalıdır. Bkz. Google Haritalar Platformu Desteklenen bölgeler için Kapsam Ayrıntıları'nı tıklayın. |
streetview
modu
Maps Embed API, Street View görüntülerini belirli konumlardan etkileşimli panoramalar kullanarak kapsama alanı dahilindedir. Kullanıcı katkıda bulunulan fotoğraf küreleri ve Street View özel koleksiyonları mevcuttur.
Her Street View panoraması, tek bir yerden 360 derecelik tam bir görünüm sunar.
konum. Resimler 360 derece yatay görünüm (tam çerçeve) içerir
ve 180 derece dikey görünüm (en dümdüzden aşağıya doğru). İlgili içeriği oluşturmak için kullanılan
streetview
modu, sonucu oluşturan bir görüntüleyici sağlar
merkezinde kamera bulunan küre şeklinde bir panorama oluşturun. Kamerayı manipüle edebilirsiniz.
kameranın yakınlaştırmayı ve yönünü kontrol edin.
Ş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
, virgülle ayrılmış enlem ve boylam değerlerini kabul eder (46.414382,10.013988
) değerleridir. API, panoramayı gösterir. bu konuma en yakın zamanda fotoğrafı çekildi. Street View görüntüleri düzenli olarak yenilenir ve fotoğraflar biraz farklı şekillerde çekilebilir. her seferinde farklı bir konuma sabitlenebilir. yeni bir panorama oluşturun.pano
belirli bir panorama kimliğidir. Birpano
ayrıca birlocation
belirtebilirsiniz. İlgili içeriği oluşturmak için kullanılanlocation
yalnızca API panoramayı bulamazsa kullanılır Kimlik.
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ü saat yönünde derece olarak gösterir geliştiriyor. | -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ğerlerin açısı kamera yukarı doğru, negatif değerler kamera açısını aşağı doğru yapar. İlgili içeriği oluşturmak için kullanılan varsayılan 0° perdesi, bu çekim sırasında kameranın konumuna göre resim çekildi. Bu nedenle, 0°'lik bir perde genellikle her zaman değil, yatay. Örneğin, bir tepede çekilen bir resim muhtemelen yatay olmayan bir varsayılan ses tonu gösterir. | -90° ile 90° arasındaki derece cinsinden değer |
fov |
İsteğe bağlı | resmin yatay görüş alanını belirler. Google sıcaklığı 90°'dir. Sabit boyutlu bir görüntü alanı ile çalışırken bir yakınlaştırma seviyesi olarak kabul edilebilir. Küçük sayılar, bir daha yüksek yakınlaştırma seviyesi sunar. | 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 arasında değişen değerler
(bağımsız binalar). Üst sınır, harita verilerine bağlı olarak değişebilir
seçilen konumda kullanılabilir. |
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 görüntülenmesi için kullanılacak dili tanımlar etiketleri kullanabilirsiniz. Varsayılan olarak, ziyaretçiler bir haritayı kendi başlarına görür dili'ne dokunun. Bu parametre yalnızca bazı ülke parçaları için desteklenir; eğer istenen dil karo grubu için desteklenmiyorsa o parça kümesi için varsayılan dil kullanılacak. | |
region |
İsteğe bağlı | Kullanıcı adı ve kimlik bilgilerine göre görüntülenecek uygun kenarlıkları ve etiketleri hassasiyetleri gözetiyor. | İki karakterlik (sayısal olmayan) belirtilen bölge kodunu kabul eder bilinen ccTLD'ye ("üst düzey alan") unicode bölgesi alt etiketi eşleme iki karakterli değerler sunmalıdır. Bkz. Google Haritalar Platformu Desteklenen bölgeler için Kapsam Ayrıntıları'nı tıklayın. |
search
modu
Search
modu, aramayla ilgili sonuçları görünür harita bölgesinde gösterir.
Arama için bir konumun
(record+stores+in+Seattle
) veya
aramayı bağlamak için bir center
ve zoom
parametresi ekleyerek.
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. | Coğrafi kısıtlama,
in+Seattle veya near+98033 gibi. |
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 arasında değişen değerler
(bağımsız binalar). Üst sınır, harita verilerine bağlı olarak değişebilir
seçilen konumda kullanılabilir. |
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 görüntülenmesi için kullanılacak dili tanımlar etiketleri kullanabilirsiniz. Varsayılan olarak, ziyaretçiler bir haritayı kendi başlarına görür dili'ne dokunun. Bu parametre yalnızca bazı ülke parçaları için desteklenir; eğer istenen dil karo grubu için desteklenmiyorsa o parça kümesi için varsayılan dil kullanılacak. | |
region |
İsteğe bağlı | Kullanıcı adı ve kimlik bilgilerine göre görüntülenecek uygun kenarlıkları ve etiketleri hassasiyetleri gözetiyor. | İki karakterlik (sayısal olmayan) belirtilen bölge kodunu kabul eder bilinen ccTLD'ye ("üst düzey alan") unicode bölgesi alt etiketi eşleme iki karakterli değerler sunmalıdır. Bkz. Google Haritalar Platformu Desteklenen bölgeler için Kapsam Ayrıntıları'nı tıklayın. |
Yer kimliği parametreleri
Maps Embed API, bir Yer adı veya adresi. Yer kimlikleri benzersiz ve kalıcı bir yeri tanımlayabileceksiniz. Daha fazla bilgi için Google Places API dokümanlarına bakın.
Maps Embed API aşağıdaki URL için yer kimliklerini kabul eder parametre:
q
origin
destination
waypoints
Yer kimliği kullanmak için önce place_id:
önekini eklemeniz gerekir. İlgili içeriği oluşturmak için kullanılan
Aşağıdaki kodda, bir yol tarifinin başlangıcı olarak New York Belediye Binası belirtilir
istek: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
radius
, metre cinsinden belirtilen bir yarıçapı belirler. belirtilen enlem ve boylama ortalanmış bir panorama manzarası. 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. Geçerli değerler şunlardır:default
, Street View için varsayılan kaynakları kullanır; aramalar kaynaklarla sınırlı değil.outdoor
, aramaları açık hava koleksiyonlarıyla sınırlandırır. İç Mekan koleksiyonlar arama sonuçlarına dahil edilmez. Dış mekan panoramalarının belirtilen yer için mevcut olmayabilir. Ayrıca yalnızca bu aşamada olan içeride olup olmadıklarının belirlenmesinin mümkün olduğu panoramalar döndürür. üretebiliriz. Örneğin, PhotoSpheres bilinmediğinden döndürülmüyor kolayca inceleyebiliyorlar.