Panduan ini menunjukkan cara menyematkan peta interaktif ke halaman web Anda.
Membuat URL Maps Embed API
Berikut adalah contoh URL yang memuat Maps Embed API:
https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS
Ganti:
- MAP_MODE dengan mode peta Anda.
- YOUR_API_KEY dengan kunci API Anda. Untuk informasi selengkapnya, lihat Mendapatkan kunci API.
- PARAMETERS dengan parameter wajib dan opsional untuk peta Anda mode.
Menambahkan URL ke iframe
Untuk menggunakan Maps Embed API di halaman web, tetapkan URL yang telah
dibuat sebagai nilai atribut src
iframe. Kontrol ukuran peta dengan
atribut height
dan width
iframe, misalnya:
<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>
Contoh iframe di atas menggunakan properti tambahan:
- Properti
allowfullscreen
untuk memungkinkan bagian peta tertentu ditampilkan dalam layar penuh. - Properti
frameborder="0"
danstyle="border:0"
untuk menghapus standar batas iframe dari sekitar peta. - Properti
referrerpolicy="no-referrer-when-downgrade"
untuk memungkinkan browser untuk mengirim URL lengkap sebagai headerReferer
dengan permintaan tersebut sehingga Pembatasan kunci API dapat berfungsi dengan baik.
Anda dapat mengubah ukuran iframe agar sesuai dengan struktur dan desain situs Anda, tetapi kami menemukan bahwa pengunjung biasanya lebih mudah berinteraksi dengan peta yang lebih besar. Perhatikan bahwa peta yang disematkan tidak didukung dengan ukuran di bawah 200 piksel dimensi kustom.
Pembatasan kunci API
Jika situs hosting memiliki tag meta referrer
yang ditetapkan ke no-referrer
atau
same-origin
, browser tidak akan mengirim header Referer
ke Google. Ini
dapat menyebabkan pembatasan kunci API
untuk menolak permintaan. Agar pembatasan berfungsi dengan baik, tambahkan
referrerpolicy
ke iframe, seperti dalam contoh di atas, untuk secara eksplisit
izinkan header Referer
dikirim ke Google.
Iklan di peta
Maps Embed API dapat menyertakan iklan di peta. Format iklan dan kumpulan iklan yang ditampilkan di peta tertentu dapat berubah tanpa pemberitahuan.
Memilih mode peta
Anda dapat menentukan salah satu mode peta berikut untuk digunakan di URL permintaan:
place
: menampilkan pin peta di tempat atau alamat tertentu, seperti bangunan terkenal, bisnis, fitur geografis, atau kota.view
: menampilkan peta tanpa penanda atau rute.directions
: menampilkan jalur antara dua atau lebih titik-titik tertentu pada peta, juga jarak dan waktu tempuhnya.streetview
: menunjukkan tampilan panorama interaktif dari lokasi yang ditentukan.search
: menampilkan hasil penelusuran di peta yang terlihat teritorial Anda.
Mode place
URL berikut menggunakan mode peta place
untuk menampilkan penanda peta di
Menara Eiffel:
https://www.google.com/maps/embed/v1/place
?key=YOUR_API_KEY
&q=Eiffel+Tower,Paris+France
Anda dapat menggunakan parameter berikut:
Parameter | Jenis | Deskripsi | Nilai yang diterima |
---|---|---|---|
q |
Wajib | Menentukan lokasi penanda peta. | Nama tempat, alamat, kode plus, atau ID tempat yang di-escape URL.
Maps Embed API mendukung + dan %20
saat meng-escape spasi. Misalnya, konversikan "City Hall, New York, NY" dapat
City+Hall,New+York,NY , atau plus kode "849VCWC8+R9" dapat
849VCWC8%2BR9 . |
center |
Opsional | Mendefinisikan bagian tengah tampilan peta. | Menerima nilai lintang dan bujur yang dipisahkan koma; misalnya:
37.4218,-122.0840 . |
zoom |
Opsional | Menetapkan tingkat zoom awal peta. | Nilai mulai dari 0 (seluruh dunia) hingga 21
(setiap bangunan). Batas atas dapat bervariasi bergantung pada data peta
tersedia di lokasi yang dipilih. |
maptype |
Opsional | Mendefinisikan jenis petak peta yang akan dimuat. | roadmap (default) atau satellite |
language |
Opsional | Mendefinisikan bahasa yang akan digunakan untuk elemen UI dan untuk tampilan label pada petak peta. Secara default, pengunjung akan melihat peta mereka sendiri di bahasa target. Parameter ini hanya didukung untuk beberapa ubin negara; jika bahasa tertentu yang diminta tidak didukung untuk rangkaian ubin, maka bahasa default untuk kumpulan ubin tersebut akan digunakan. | |
region |
Opsional | Menentukan batas dan label yang sesuai untuk ditampilkan, berdasarkan sensitivitas geo-politik. | Menerima kode wilayah yang ditentukan sebagai dua karakter (non-numerik) Pemetaan subtag region unicode ke ccTLD ("domain level teratas") yang sudah dikenal nilai yang sama dengan dua karakter. Lihat Google Maps Platform Detail Cakupan untuk wilayah yang didukung. |
Mode view
Contoh berikut menggunakan mode view
dan parameter maptype
opsional untuk
tampilkan tampilan satelit untuk peta:
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
&maptype=satellite
Anda dapat menggunakan parameter berikut:
Parameter | Jenis | Deskripsi | Nilai yang diterima |
---|---|---|---|
center |
Wajib | Mendefinisikan bagian tengah tampilan peta. | Menerima nilai lintang dan bujur yang dipisahkan koma; misalnya:
37.4218,-122.0840 . |
zoom |
Opsional | Menetapkan tingkat zoom awal peta. | Nilai mulai dari 0 (seluruh dunia) hingga 21
(setiap bangunan). Batas atas dapat bervariasi bergantung pada data peta
tersedia di lokasi yang dipilih. |
maptype |
Opsional | Mendefinisikan jenis petak peta yang akan dimuat. | roadmap (default) atau satellite |
language |
Opsional | Mendefinisikan bahasa yang akan digunakan untuk elemen UI dan untuk tampilan label pada petak peta. Secara default, pengunjung akan melihat peta mereka sendiri di bahasa target. Parameter ini hanya didukung untuk beberapa ubin negara; jika bahasa tertentu yang diminta tidak didukung untuk rangkaian ubin, maka bahasa default untuk kumpulan ubin tersebut akan digunakan. | |
region |
Opsional | Menentukan batas dan label yang sesuai untuk ditampilkan, berdasarkan sensitivitas geo-politik. | Menerima kode wilayah yang ditentukan sebagai dua karakter (non-numerik) Pemetaan subtag region unicode ke ccTLD ("domain level teratas") yang sudah dikenal nilai yang sama dengan dua karakter. Lihat Google Maps Platform Detail Cakupan untuk wilayah yang didukung. |
Mode directions
Contoh berikut menggunakan mode directions
untuk menampilkan jalur antara Oslow
dan Telemark, Norwegia, jarak, dan waktu perjalanan yang menghindari jalan tol dan jalan raya.
https://www.google.com/maps/embed/v1/directions
?key=YOUR_API_KEY
&origin=Oslo+Norway
&destination=Telemark+Norway
&avoid=tolls|highways
Anda dapat menggunakan parameter berikut:
Parameter | Jenis | Deskripsi | Nilai yang diterima |
---|---|---|---|
origin |
Wajib | Menentukan titik awal untuk menampilkan rute. | Nama tempat, alamat, kode plus, lintang/bujur yang di-escape URL
koordinat, atau ID tempat.
Maps Embed API mendukung + dan %20
saat meng-escape spasi. Misalnya, konversikan "City Hall, New York, NY" dapat
City+Hall,New+York,NY , atau plus kode "849VCWC8+R9" dapat
849VCWC8%2BR9 . |
destination |
Wajib | Menentukan titik akhir rute. | Nama tempat, alamat, kode plus, lintang/bujur yang di-escape URL
koordinat, atau ID tempat.
Maps Embed API mendukung + dan %20
saat meng-escape spasi. Misalnya, konversikan "City Hall, New York, NY" dapat
City+Hall,New+York,NY , atau plus kode "849VCWC8+R9" dapat
849VCWC8%2BR9 . |
waypoints |
Opsional | Menentukan satu atau beberapa tempat perantara untuk mengarahkan rute antara tempat asal dan tujuan. | Nama tempat, alamat, atau ID tempat.
Beberapa titik jalan dapat ditentukan menggunakan karakter pipa (|) untuk
tempat terpisah (misalnya, Berlin,Germany|Paris,France ). Anda dapat
menentukan hingga 20 titik jalan. |
mode |
Opsional | Menentukan metode perjalanan. Jika tidak ada mode yang ditentukan, Maps Embed API akan menampilkan satu atau beberapa mode yang paling relevan untuk rute yang ditentukan. | driving , walking (yang lebih memilih pejalan kaki
jalan setapak dan trotoar, jika tersedia), bicycling (yang
melalui jalur sepeda dan jalan yang disukai jika tersedia),
transit , atau flying . |
avoid |
Opsional | Menentukan fitur yang harus dihindari dalam rute. Perhatikan bahwa ini tidak mengecualikan rute yang berisi fitur yang dibatasi; hal tersebut membuat bias ke rute yang lebih menguntungkan. | tolls , ferries , dan/atau highways .
Pisahkan beberapa nilai dengan karakter pipa (mis.
avoid=tolls|highways ). |
units |
Opsional | Menentukan metode pengukuran, metrik, atau imperial, saat menampilkan
jarak dalam hasil penelusuran. Jika units tidak ditentukan, elemen
origin negara dari kueri menentukan unit yang akan digunakan. |
metric atau imperial |
center |
Opsional | Mendefinisikan bagian tengah tampilan peta. | Menerima nilai lintang dan bujur yang dipisahkan koma; misalnya:
37.4218,-122.0840 . |
zoom |
Opsional | Menetapkan tingkat zoom awal peta. | Nilai mulai dari 0 (seluruh dunia) hingga 21
(setiap bangunan). Batas atas dapat bervariasi bergantung pada data peta
tersedia di lokasi yang dipilih. |
maptype |
Opsional | Mendefinisikan jenis petak peta yang akan dimuat. | roadmap (default) atau satellite |
language |
Opsional | Mendefinisikan bahasa yang akan digunakan untuk elemen UI dan untuk tampilan label pada petak peta. Secara default, pengunjung akan melihat peta mereka sendiri di bahasa target. Parameter ini hanya didukung untuk beberapa ubin negara; jika bahasa tertentu yang diminta tidak didukung untuk rangkaian ubin, maka bahasa default untuk kumpulan ubin tersebut akan digunakan. | |
region |
Opsional | Menentukan batas dan label yang sesuai untuk ditampilkan, berdasarkan sensitivitas geo-politik. | Menerima kode wilayah yang ditentukan sebagai dua karakter (non-numerik) Pemetaan subtag region unicode ke ccTLD ("domain level teratas") yang sudah dikenal nilai yang sama dengan dua karakter. Lihat Google Maps Platform Detail Cakupan untuk wilayah yang didukung. |
Mode streetview
Maps Embed API memungkinkan Anda menampilkan gambar Street View sebagai panorama interaktif dari lokasi yang dipilih hingga area cakupan. Pengguna foto 360° yang dikontribusikan, dan Koleksi khusus Street View juga tersedia.
Setiap panorama Street View memberikan tampilan penuh 360 derajat dari satu
lokasi HTTP/HTTPS. Gambar berisi tampilan horizontal 360 derajat (satu putaran penuh)
dan tampilan vertikal 180 derajat (dari lurus ke atas sampai lurus ke bawah). Tujuan
Mode streetview
menyediakan penampil yang merender hasil
panorama sebagai bola dunia dengan kamera di tengahnya. Anda dapat memanipulasi kamera
untuk mengontrol zoom dan orientasi kamera.
Lihat panorama mode streetview
berikut:
https://www.google.com/maps/embed/v1/streetview
?key=YOUR_API_KEY
&location=46.414382,10.013988
&heading=210
&pitch=10
&fov=35
Salah satu dari parameter URL berikut wajib diisi:
location
menerima lintang dan bujur sebagai yang dipisahkan koma nilai (46.414382,10.013988
). API akan menampilkan panorama difoto yang paling dekat dengan lokasi ini. Karena gambar Street View diperbarui secara berkala, dan foto mungkin diambil dari setiap saat, lokasi Anda mungkin akan dipaskan ke panorama saat gambar diperbarui.pano
adalah ID panorama tertentu. Jika Anda menentukanpano
Anda juga dapat menentukanlocation
. Tujuanlocation
hanya akan digunakan jika API tidak dapat menemukan panorama ke ID.
Parameter URL berikut ini bersifat opsional:
Parameter | Jenis | Deskripsi | Nilai yang diterima |
---|---|---|---|
heading |
Opsional | Menunjukkan judul kompas kamera dalam derajat, searah jarum jam dari Utara. | Nilai dalam derajat dari -180° hingga 360° |
pitch |
Opsional | menentukan sudut, atas atau bawah, pada kamera. Nilai positif akan membentuk sudut kamera ke atas, sementara nilai negatif akan menurunkan sudut kamera. Tujuan pitch default 0° disetel berdasarkan posisi kamera saat gambar diambil. Karena itu, nada 0° sering kali, tapi tidak selalu, horizontal. Misalnya, gambar yang diambil dari atas bukit kemungkinan menampilkan pitch default yang tidak horizontal. | Nilai dalam derajat dari -90° hingga 90° |
fov |
Opsional | menentukan ruang pandang horizontal gambar. Ini setelan defaultnya adalah 90°. Ketika berhadapan dengan area pandang berukuran tetap, bidang isian ini dapat dianggap sebagai tingkat {i>zoom<i}, dengan angka yang lebih kecil menunjukkan tingkat zoom yang lebih tinggi. | Nilai dalam derajat, dengan rentang 10° - 100° |
center |
Opsional | Mendefinisikan bagian tengah tampilan peta. | Menerima nilai lintang dan bujur yang dipisahkan koma; misalnya:
37.4218,-122.0840 . |
zoom |
Opsional | Menetapkan tingkat zoom awal peta. | Nilai mulai dari 0 (seluruh dunia) hingga 21
(setiap bangunan). Batas atas dapat bervariasi bergantung pada data peta
tersedia di lokasi yang dipilih. |
maptype |
Opsional | Mendefinisikan jenis petak peta yang akan dimuat. | roadmap (default) atau satellite |
language |
Opsional | Mendefinisikan bahasa yang akan digunakan untuk elemen UI dan untuk tampilan label pada petak peta. Secara default, pengunjung akan melihat peta mereka sendiri di bahasa target. Parameter ini hanya didukung untuk beberapa ubin negara; jika bahasa tertentu yang diminta tidak didukung untuk rangkaian ubin, maka bahasa default untuk kumpulan ubin tersebut akan digunakan. | |
region |
Opsional | Menentukan batas dan label yang sesuai untuk ditampilkan, berdasarkan sensitivitas geo-politik. | Menerima kode wilayah yang ditentukan sebagai dua karakter (non-numerik) Pemetaan subtag region unicode ke ccTLD ("domain level teratas") yang sudah dikenal nilai yang sama dengan dua karakter. Lihat Google Maps Platform Detail Cakupan untuk wilayah yang didukung. |
Mode search
Mode Search
menampilkan hasil penelusuran di seluruh wilayah peta yang terlihat.
Sebaiknya lokasi untuk penelusuran ditentukan, baik dengan
termasuk lokasi dalam istilah penelusuran (record+stores+in+Seattle
) atau
dengan menyertakan parameter center
dan zoom
untuk membatasi penelusuran.
https://www.google.com/maps/embed/v1/search
?key=YOUR_API_KEY
&q=record+stores+in+Seattle
Anda dapat menggunakan parameter berikut:
Parameter | Jenis | Deskripsi | Nilai yang diterima |
---|---|---|---|
q |
Wajib | Mendefinisikan istilah penelusuran. | Hal ini dapat mencakup pembatasan geografis,
seperti in+Seattle atau near+98033 . |
center |
Opsional | Mendefinisikan bagian tengah tampilan peta. | Menerima nilai lintang dan bujur yang dipisahkan koma; misalnya:
37.4218,-122.0840 . |
zoom |
Opsional | Menetapkan tingkat zoom awal peta. | Nilai mulai dari 0 (seluruh dunia) hingga 21
(setiap bangunan). Batas atas dapat bervariasi bergantung pada data peta
tersedia di lokasi yang dipilih. |
maptype |
Opsional | Mendefinisikan jenis petak peta yang akan dimuat. | roadmap (default) atau satellite |
language |
Opsional | Mendefinisikan bahasa yang akan digunakan untuk elemen UI dan untuk tampilan label pada petak peta. Secara default, pengunjung akan melihat peta mereka sendiri di bahasa target. Parameter ini hanya didukung untuk beberapa ubin negara; jika bahasa tertentu yang diminta tidak didukung untuk rangkaian ubin, maka bahasa default untuk kumpulan ubin tersebut akan digunakan. | |
region |
Opsional | Menentukan batas dan label yang sesuai untuk ditampilkan, berdasarkan sensitivitas geo-politik. | Menerima kode wilayah yang ditentukan sebagai dua karakter (non-numerik) Pemetaan subtag region unicode ke ccTLD ("domain level teratas") yang sudah dikenal nilai yang sama dengan dua karakter. Lihat Google Maps Platform Detail Cakupan untuk wilayah yang didukung. |
Parameter ID tempat
Maps Embed API mendukung penggunaan ID tempat, bukan menyediakan nama tempat atau alamat. ID tempat adalah cara yang stabil untuk mengidentifikasi tempat. Untuk informasi selengkapnya, lihat dokumentasi Google Places API.
Maps Embed API menerima ID tempat untuk URL berikut parameter:
q
origin
destination
waypoints
Untuk menggunakan ID tempat, Anda harus menambahkan awalan place_id:
terlebih dahulu. Tujuan
kode berikut menentukan New York City Hall sebagai tempat asal rute
permintaan: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
radius
menetapkan radius yang ditentukan dalam meter untuk menelusuri panorama, yang berpusat pada lintang dan bujur yang diberikan. Nilai valid adalah bilangan bulat non-negatif. Nilai defaultnya adalah 50.source
membatasi penelusuran Street View ke sumber yang dipilih. Nilai yang valid adalah:default
menggunakan sumber default untuk Street View; penelusuran adalah tidak terbatas pada sumber tertentu.outdoor
membatasi penelusuran ke koleksi luar ruangan. Dalam ruangan koleksi tidak disertakan dalam hasil penelusuran. Perhatikan bahwa panorama luar ruangan mungkin tidak ada untuk lokasi yang ditentukan. Perhatikan juga bahwa penelusuran hanya mengembalikan panorama yang memungkinkan untuk menentukan apakah mereka berada di dalam ruangan atau di luar ruangan. Misalnya, PhotoSpheres tidak ditampilkan karena tidak diketahui baik di dalam maupun di luar ruangan.