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 bölümlerinin tam ekran moduna geçmesini sağlayan
allowfullscreen
özelliği. - Standart iframe sınırını haritadan kaldırmak için
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 bulunmanın genellikle daha kolay olduğunu düşünüyoruz. Yerleştirilmiş haritaların her iki boyutta da 200 pikselin altındaki boyutların 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
üst bilgisini 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
üstbilgilerinin Google'a gönderilmesine açıkça izin vermek üzere yukarıdaki örnekte olduğu gibi iframe'e bir referrerpolicy
özelliği ekleyin.
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 kullanmak için aşağıdaki harita modlarından birini belirtebilirsiniz:
place
: Belirli bir yer veya adreste (ör. önemli nokta, işletme, coğrafi özellik veya şehir) bir harita raptiyesi görüntüler.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, 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 bir aramanın sonuçlarını gösterir.
place
modu
Aşağıdaki URL, Eyfel Kulesi'nde bir harita işaretleyiciyi 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, alanlardan çıkış yaparken hem + hem de %20 kullanımını destekler. Örneğin, "Belediye binası, New York, NY" değerini City+Hall,New+York,NY veya artı kodlarını "849VCWC8+R9" olarak
849VCWC8%2BR9 yapı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) arasındaki değerler. Ü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 karoları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. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil karo grubu için desteklenmiyorsa bu kutucuğun varsayılan dili 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ölge alt etiketi olarak, bilinen ccTLD ("üst düzey alan") değerleriyle eşlenen 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
¢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) arasındaki değerler. Ü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 karoları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. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil karo grubu için desteklenmiyorsa bu kutucuğun varsayılan dili 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ölge alt etiketi olarak, bilinen ccTLD ("üst düzey alan") değerleriyle eşlenen 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, Oslow ile Telemark arasındaki yolu, Norveç'i, ücretli geçişleri ve otoyolları kullanmadan mesafeyi ve seyahat süresini görüntülemek için directions
modu kullanılmıştı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, alanlardan çıkış yaparken hem + hem de %20 kullanımını destekler. Örneğin, "Belediye binası, New York, NY" değerini City+Hall,New+York,NY veya artı kodlarını "849VCWC8+R9" olarak
849VCWC8%2BR9 yapı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, alanlardan çıkış yaparken hem + hem de %20 kullanımını destekler. Örneğin, "Belediye binası, New York, NY" değerini City+Hall,New+York,NY veya artı kodlarını "849VCWC8+R9" olarak
849VCWC8%2BR9 yapın. |
waypoints |
İsteğe bağlı | Başlangıç ve hedef arasındaki 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 belirtilmemişse Maps Embed API, belirtilen rotayla en alakalı modlardan birini veya birkaçını gösterir. | driving , walking (varsa, yaya yollarını ve kaldırımları tercih eder), bicycling (varsa bisiklet yolları ve tercih edilen caddeler üzerinden rota oluşturur), 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, 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, metriği veya İngiliz ölçü birimini
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ğ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) arasındaki değerler. Ü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 karoları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. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil karo grubu için desteklenmiyorsa bu kutucuğun varsayılan dili 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ölge alt etiketi olarak, bilinen ccTLD ("üst düzey alan") değerleriyle eşlenen 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 resimlerini ilgili kapsam alanı genelinde belirlenen 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 Street View panoraması, tek bir konumdan tam 360 derecelik görünüm
sağlar. Resimler 360 derece yatay görünüm (her yeri kaplayan) ve 180 derece dikey görünüm (düzden aşağıya doğru) içerir. streetview
modu, ortaya çıkan panoramayı merkezinde kamera bulunan bir küre olarak 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 zorunludur:
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ğraflanan panoramayı görüntüler. 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. Birpano
belirtirsenizlocation
de 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 olarak 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 yataydır. Örneğin, tepede çekilen bir görüntü için muhtemelen yatay olmayan bir varsayılan dönüş açısı sergilenecektir. | -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° ayarlanır. Sabit boyutlu bir görüntü alanı söz konusu olduğunda, görüş alanı yakınlaştırma düzeyi olarak değerlendirilir. Daha küçük sayılar ise daha yüksek bir yakınlaştırma düzeyini gösterir. | Derece cinsinden değer (10° - 100° aralığında) |
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) arasındaki değerler. Ü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 karoları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. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil karo grubu için desteklenmiyorsa bu kutucuğun varsayılan dili 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ölge alt etiketi olarak, bilinen ccTLD ("üst düzey alan") değerleriyle eşlenen bölge kodunu 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 aramanın sonuçlarını görüntüler.
Arama için bir konumun, arama terimine (record+stores+in+Seattle
) bir konum dahil edilerek veya aramayı bağlamak için center
ve zoom
parametreleri eklenerek 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 bir 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) arasındaki değerler. Ü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 karoları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. Varsayılan olarak, ziyaretçiler kendi dillerinde bir harita görür. Bu parametre yalnızca bazı ülke parçaları için desteklenir. İstenen belirli dil karo grubu için desteklenmiyorsa bu kutucuğun varsayılan dili 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ölge alt etiketi olarak, bilinen ccTLD ("üst düzey alan") değerleriyle eşlenen bölge kodunu kabul eder. Desteklenen bölgeler için Google Haritalar Platformu Kapsam Ayrıntıları'na bakın. |
Yer kimliği parametreleri
Maps Embed API, yer adı veya adres sağlamak yerine yer kimliklerinin kullanılmasını destekler. Yer kimlikleri, bir yeri benzersiz bir şekilde tanımlamanın kararlı 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 ortasından alınan ve panoramik aranabileceği, 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ıyor. 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ı alanda mı yoksa açık alanda mı olduğunun belirlenmesinin mümkün olduğu panoramaları döndürdüğünü de unutmayın. Örneğin, Photo Sphere kapalı mı yoksa açık mı olduğu bilinmediği için döndürülmez.