Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps Embed API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps Embed API
  3. Buat kunci yang sesuai
Lanjutkan

Google Maps Embed API

Ringkasan

Google Maps Embed API memungkinkan Anda menempatkan peta interaktif, atau panorama Street View di situs Anda dengan permintaan HTTP yang sederhana. Ini bisa Anda sisipkan dengan mudah di laman web atau blog Anda dengan mengatur URL Google Maps Embed API sebagai atribut src iframe:

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

Peta yang dibuat untuk Anda

Setiap pengunjung situs Anda akan melihat Google Map yang dikhususkan untuk mereka. Jika mereka masuk dengan akun Google, lokasi tempat, rumah, tempat kerja dan sebagainya yang mereka simpan akan dimasukkan ke dalam peta yang mereka lihat. Ini juga berarti interaksi dengan peta, misalnya lokasi yang diberi tanda bintang, akan disimpan agar mudah dilihat di Google Maps untuk desktop atau seluler.

Detail spesifik pengguna ini tidak akan terlihat oleh pengguna lain. Setiap pengunjung akan melihat peta yang khusus dibuat untuk mereka.

Mudah disematkan Peta

Google Maps Embed API mudah ditambahkan ke laman web Anda—cukup mengatur URL yang Anda bangun sebagai nilai atribut src iframe. Kontrol ukuran peta dengan atribut height dan width iframe. JavaScript tidak diperlukan.

Tidak ada batas penggunaan

Tidak ada batas penggunaan untuk Google Maps Embed API. Anda bisa menyematkan peta atau panorama Street View di situs web Anda yang memiliki lalu lintas tinggi tanpa khawatir mencapai batas maksimum penggunaan atau pengurangan kueri-per-detik.

Iklan di peta

Google Maps Embed API mungkin menyertakan iklan di peta. Format iklan dan iklan-iklan yang ditampilkan di peta yang diberikan bisa berubah tanpa pemberitahuan.

Membentuk URL

URL untuk permintaan Google Maps Embed API adalah sebagai berikut:

https://www.google.com/maps/embed/v1/MODE?key=YOUR_API_KEY&parameters

Dalam hal ini:

  • {MODE} salah satu dari place, directions, search, view, atau streetview.
  • {YOUR_API_KEY} adalah kunci API gratis Anda.
  • parameters menyertakan parameter opsional, serta parameter mode tertentu.

Kunci API

Semua permintaan ke Google Maps Embed API harus menyertakan kunci API gratis sebagai nilai parameter key. Kunci tersebut memungkinkan Anda memantau penggunaan Maps API pada aplikasi Anda, dan memastikan Google bisa menghubungi Anda tentang situs web/aplikasi jika diperlukan.

Untuk memulai penggunaan Google Maps Embed API, klik tombol di bawah ini yang akan mengaktifkan Google Maps Embed API secara otomatis dan mendapatkan kunci API.

Dapatkan Kunci

Alternatifnya, ikuti langkah-langkah ini untuk mendapatkan kunci API:

  1. Masuklah ke Google API Console.
  2. Buat atau pilih sebuah proyek.
  3. Klik Continue untuk mengaktifkan API.
  4. Pada laman Credentials, dapatkan kunci API (dan setel pembatasan kunci API).
    Catatan: Jika Anda memiliki kunci API tidak terbatas, atau kunci dengan pembatasan browser, Anda boleh menggunakan kunci itu.
  5. Kami menyarankan Anda untuk mengamankan kunci API dengan mengikuti praktik terbaik ini.


Dalam Google API Console, Anda juga bisa mencari kunci yang sudah ada atau menampilkan daftar API yang telah diaktifkan.

Untuk informasi selengkapnya mengenai penggunaan Google API Console, lihat Bantuan API Console.

Tipe pembatasan kunci API

Google Maps API tersedia untuk aplikasi Android atau iOS, browser Web, dan melalui layanan web HTTP. API di suatu platform bisa menggunakan kunci API generik (tidak dibatasi). Secara opsional, Anda bisa menambahkan pembatasan (misalnya, referrer HTTP) ke kunci API. Setelah dibatasi, kunci hanya akan bekerja pada platform yang mendukung tipe pembatasan itu. Ketahui selengkapnya tentang kunci dan kredensial.

Mode Peta

Ada empat mode penyematan peta yang tersedia untuk Anda. Mode ini ditetapkan dalam URL permintaan.

Mode Place

Mode Place menampilkan pin pada tempat atau alamat tertentu, misalnya landmark, perusahaan, fitur geografis, atau kota.

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

Diperlukan parameter URL berikut:

  • q mendefinisikan tempat yang akan disorot di peta. Parameter ini menerima lokasi sebagai nama tempat, alamat, atau ID tempat. String ini harus dikonversi ke URL, sehingga alamat seperti "City Hall, New York, NY" akan dikonversi menjadi City+Hall,New+York,NY. (Google Maps Embed API mendukung + maupun %20 saat mengonversi spasi.) ID Tempat harus diawali dengan place_id:.

Penyimpanan yang Diatribusikan

Pengguna yang masuk ke akun Google mereka akan bisa menyimpan tempat yang ditunjukkan oleh parameter q. Tempat yang disimpan akan bisa dilihat pada peta Google lain di web atau perangkat seluler. Secara default, tempat yang disimpan dari peta yang disematkan akan menyertakan informasi atribusi untuk mengingatkan pengguna di mana mereka berada saat menyimpan tempat itu. Anda bisa melakukan personalisasi atribusi dengan parameter berikut.

  • attribution_source mengatribusikan penyimpanan ke situs atau aplikasi Anda. Anda harus menyertakan attribution_source khusus sebelum mengatur attribution_web_url maupun attribution_ios_deep_link_id. Default-nya adalah jalur URL laman yang menjadi tempat munculnya peta, misalnya: https://example.com/path/
  • attribution_web_url menetapkan tautan untuk kembali ke situs web Anda. Jika attribution_source tidak ditetapkan, attribution_web_url akan default ke URL yang menjadi tempat munculnya peta yang disematkan, misalnya: https://example.com/path/page.html
  • attribution_ios_deep_link_id menetapkan Skema URL yang menyediakan tautan dalam ke aplikasi iOS. Bila dilihat di Google Maps for iOS, attribution_ios_deep_link_id akan ditampilkan menggantikan attribution_web_url.

Contoh di bawah ini menampilkan pin di Hotel Empress di Victoria, British Columbia. Menyimpan lokasi ini akan mengatribusikan penyimpanan ke "Google Maps Embed API". Atribusi akan muncul sebagai URL. Contoh ini memanfaatkan penggunaan Google Maps URL Scheme untuk memberikan arah mengemudi kepada Pengguna iOS.

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Fairmont+Empress,Victoria+BC
  &attribution_source=Google+Maps+Embed+API
  &attribution_web_url=http://www.fairmont.com/empress-victoria/
  &attribution_ios_deep_link_id=comgooglemaps://?daddr=Fairmont+Empress,+Victoria,+BC

Mode Directions

Mode Directions menampilkan jalur antara dua atau beberapa titik yang ditetapkan pada peta, bersama jarak dan waktu tempuhnya.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

Parameter URL berikut diperlukan:

  • origin mendefinisikan titik mulai menampilkan arah. Nilai ini bisa berupa nama tempat, alamat atau ID tempat. String ini harus dikonversi ke URL, sehingga alamat seperti "City Hall, New York, NY" akan dikonversi menjadi City+Hall,New+York,NY. (Google Maps Embed API mendukung + maupun %20 saat mengonversi spasi.) ID tempat harus diawali dengan place_id:.
  • destination mendefinisikan titik akhir arah ini.

Parameter URL berikut ini bersifat opsional:

  • waypoints menetapkan satu atau beberapa tempat antara untuk merutekan arah yang dilewati di antara tempat asal dan tujuan. Beberapa titik jalan dapat ditentukan menggunakan karakter pipa (|) untuk memisahkan tempat (mis. Berlin,Germany|Paris,France). Anda bisa menetapkan hingga 20 titik jalan. Setiap titik jalan bisa berupa nama tempat, alamat atau ID tempat.
  • mode mendefinisikan metode perjalanan. Tersedia opsi driving, walking (yang lebih mengutamakan jalur pejalan kaki dan trotoar, bila tersedia), bicycling (yang merutekan melalui lintasan sepeda dan jalan yang disukai bila tersedia), transit, atau flying. Jika tidak ada moda yang ditetapkan, Google Maps Embed API akan menampilkan satu atau beberapa moda paling relevan untuk rute yang ditetapkan.
  • avoid memberi tahu Google Maps untuk menghindari tolls, ferries dan/atau highways. Pisahkan beberapa nilai dengan karakter pipa (mis. avoid=tolls|highways). Perhatikan, ini tidak mengecualikan rute yang berisi fitur dibatasi; hanya mencondongkan hasil ke rute yang lebih disukai.
  • units menetapkan satuan metric maupun imperial saat menampilkan jarak dalam hasil. Jika units tidak ditetapkan, negara origin pada kueri akan menentukan satuan yang akan digunakan.

Mode Search menampilkan hasil penelusuran di seluruh region peta yang terlihat. Disarankan untuk mendefinisikan lokasi penelusuran, baik dengan menyertakan 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

Diperlukan parameter URL berikut:

  • q menetapkan istilah penelusuran. Bisa juga menyertakan pembatasan geografis, seperti in+Seattle atau near+98033.

Mode View

Mode View mengembalikan peta tanpa marker atau arah.

Contoh di bawah ini menggunakan parameter maptype opsional untuk menampilkan satelit peta.

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Diperlukan parameter URL berikut:

  • center mendefinisikan titik tengah jendela peta, dan menerima garis lintang dan garis bujur sebagai nilai yang dipisah koma (-33.8569,151.2152).

Parameter opsional

Parameter opsional berikut bisa digunakan pada semua mode peta yang tercantum di atas.

  • center mendefinisikan titik tengah tampilan peta. Parameter ini menerima nilai garis lintang dan garis bujur yang dipisah koma (seperti 37.4218,-122.0840).

  • zoom mengatur tingkat zoom awal untuk peta. Nilai yang diterima berkisar dari 0 (seluruh dunia) hingga 21 (setiap bangunan). Batas atas bisa bervariasi, bergantung pada data peta yang tersedia untuk lokasi yang dipilih.

  • maptype bisa berupa roadmap (default) atau satellite, dan mendefinisikan tipe petak peta yang akan dimuat.

  • language mendefinisikan bahasa yang akan digunakan untuk elemen UI dan untuk tampilan label pada petak peta. Perhatikan, parameter ini hanya didukung untuk beberapa petak negara; jika bahasa yang diminta tidak didukung untuk rangkaian petak, maka bahasa default untuk rangkaian petak tersebut yang akan digunakan. Secara default, pengunjung akan melihat peta dalam bahasa mereka.

  • region mendefinisikan batas dan label yang sesuai untuk ditampilkan, berdasarkan sensitivitas geopolitis. Menerima kode region yang ditetapkan sebagai nilai ccTLD (top-level domain) yang berisi dua karakter.

Parameter ID Tempat

Google Maps Embed API mendukung penggunaan ID tempat sebagai ganti menyediakan nama tempat atau alamat. ID tempat adalah cara yang stabil untuk mengidentifikasi suatu tempat secara unik. Lihat dokumentasi Google Places API untuk informasi selengkapnya tentang cara menemukan dan menggunakan ID tempat.

Google Maps Embed API menerima ID tempat untuk parameter URL berikut:

  • q

  • origin

  • destination

  • waypoints

Untuk menggunakan ID tempat, Anda harus terlebih dahulu menambahkan awalan place_id:. Kode berikut menetapkan New York City Hall sebagai tempat asal untuk arah request: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

Mode Street View

Google Maps Embed API memungkinkan Anda menampilkan gambar Street View di situs atau blog Anda sebagai panorama interaktif. Google Street View menyediakan tampilan panorama dari lokasi yang dipilih sampai area cakupan. Fotosfer kontribusi pengguna, dan kumpulan khusus Street View juga tersedia.

Setiap panorama Street View memberikan tampilan 360 derajat penuh dari satu lokasi. Gambar berisi tampilan horizontal 360 (satu putaran penuh) dan tampilan vertikal 180 derajat (dari lurus ke atas sampai lurus ke bawah). Mode streetview menyediakan penampil yang merender panorama yang dihasilkan sebagai bola dunia dengan kamera di tengahnya. Anda bisa memanipulasi kamera untuk mengontrol zoom dan orientasi kamera.

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

Diperlukan salah satu dari parameter URL berikut:

  • location menerima garis lintang dan garis bujur sebagai nilai yang dipisah koma (46.414382,10.013988). API akan menampilkan foto panorama yang terdekat dengan lokasi ini. Karena gambar Street View secara berkala disegarkan, dan fotonya mungkin diambil dari posisi yang sedikit berbeda, sehingga mungkin lokasi Anda bergeser ke panorama berbeda ketika gambar diperbarui.

  • pano adalah ID panorama tertentu. Jika Anda menetapkan pano Anda juga bisa menetapkan location. location hanya akan digunakan jika API tidak bisa menemukan ID panorama.

Parameter URL berikut ini bersifat opsional:

  • heading menunjukkan kepala kompas pada kamera dalam derajat searah jarum jam dari Utara. Nilai yang diterima adalah dari -180° hingga 360°.

  • pitch menetapkan sudut, naik atau turun, pada kamera. pitch ditetapkan dalam derajat dari -90° hingga 90°. Nilai positif akan menaikkan sudut kamera, sementara nilai negatif akan menurunkan sudut kamera. Pitch default 0° diatur berdasarkan posisi kamera saat gambar dijepret. Karena itu, pitch 0° sering kali, namun tidak selalu, horizontal. Misalnya, gambar yang diambil dari atas bukit kemungkinan akan menampilkan pitch default yang tidak horizontal.

  • fov menentukan bidang pandang horizontal gambar. Bidang pandang dinyatakan dalam derajat, yang berkisar antara 10° - 100°. Default-nya adalah 90°. Saat menangani bidang tampilan yang terlihat berukuran tetap, bidang pandang bisa dianggap sebagai tingkat zoom, dengan angka yang lebih kecil menunjukkan tingkat zoom lebih tinggi.

  • language mendefinisikan bahasa yang akan digunakan untuk elemen UI dan label. Secara default, pengunjung akan melihat elemen UI dalam bahasa mereka.

  • region mendefinisikan batas dan label yang sesuai untuk ditampilkan, berdasarkan sensitivitas geopolitis. Menerima kode region yang ditetapkan sebagai nilai ccTLD (top-level domain) yang berisi dua karakter.

Menyematkan peta

Untuk menggunakan Google Maps Embed API di laman web Anda, atur URL yang telah Anda buat sebagai nilai atribut src iframe. Kontrol ukuran peta dengan atribut height dan width iframe:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&q=record+stores+in+Seattle" allowfullscreen>
</iframe>

Tip: Tambahkan allowfullscreen ke properti iframe Anda agar bagian peta tertentu ditampilkan selayar penuh. Tip: Properti frameborder="0" dan style="border:0" membuang batas iframe standar dari sekeliling peta.

Anda bisa mengubah ukuran iframe agar sesuai dengan struktur dan desain situs web Anda, namun kami merasa para pengunjung biasanya lebih mudah berinteraksi dengan peta yang lebih besar. Perhatikan, peta yang disematkan tidak didukung bila ukurannya di bawah 200 px dalam kedua dimensi.

Kirim masukan tentang...

Google Maps Embed API
Google Maps Embed API
Butuh bantuan? Kunjungi halaman dukungan kami.