Ini Dia Implementasi Google Maps Platform untuk Maps Javascript API

5 April 2021

Google Maps Platform adalah sekumpulan API dan SDK yang memungkinkan developer atau pengembang untuk menyematkan Google Maps ke dalam aplikasi seluler dan halaman web, atau untuk mengambil data dari Google Maps. Saat ini Google Maps Platform memiliki 3 produk utama, yaitu Maps, Places dan Routes dengan jumlah seluruh API dan SDK yang ada sebanyak 17 API dan SDK. Tapi, tahukah Anda bagaimana implementasi Google Maps Platform untuk API peta interaktif atau yang biasa disebut dengan Dynamic Maps API?

Dynamic Maps API atau Maps Javascript API merupakan visualisasi dari tampilan peta digital milik Google. Dynamic Maps ini biasanya ditampilkan pada halaman website ada pun yang menggunakan Dynamic Maps untuk aplikasi mobile karena menggunakan bahasa pemrograman Hybrid.

Kelebihan dari Dynamic Maps diantaranya tampilan interaktif, dapat memiringkan, memutar, memperbesar atau memperkecil, dan menggeser dengan kontrol penuh. Kemudian, Dynamic Maps dapat dilakukan kostumisasi dengan memasukan beberapa layer lain di atas peta, seperti gambar, batas wilayah tertentu, heatmap, dsb serta dapat merubah marker dan menampilkan info window diatasnya.

Lebih lengkap mengenai API dan SDK lain dari Google Maps Platform bisa baca disini: Jangan Salah Pilih API, Berikut Fungsi Google Maps Platform API

Table of Contents

Fungsi dan Persiapan

Sederhananya tampilan Dynamic Maps API ini sangat sama dengan tampilan peta dalam Google Maps Public yang biasa digunakan oleh Anda sehari-hari. Aktivitas yang dapat dilakukan antara Dynamic Maps API dan Google Maps Public pun sama, dapat dimiringkan, memutar, memperbesar atau memperkecil dan menggeser dengan kontrol penuh.

Untuk melakukan implementasi Google Maps Platform pada Dynamic Maps API, Anda memerlukan beberapa persiapan diantaranya:

Laptop atau komputer yang tersambung internet
Pengetahuan dasar mengenai pemrograman website berupa HTML, CSS, dan Javascript.
API Key Google Maps Platform

Implementasi Google Maps Platform ini bertujuan untuk menampilkan peta interaktif Google Maps Platform API pada website Anda. Tampilan peta yang ingin ditampilkan dalam artikel ini adalah peta provinsi DKI Jakarta seperti dibawah. Berikut langkah-langkah Implementasi Google Maps Platform untuk Maps Javascript API:

Berikut Langkah-Langkah implementasi Google Maps API

Siapkan teks editor seperti gambar dibawah, teks editor yang digunakan dibawah adalah Sublime Text 3 yang bisa Anda unduh secara gratis. Anda juga bisa menggunakan teks editor lain kesayangan Anda.

Untuk permulaan, silahkan simpan dahulu file yang akan Anda buat saat ini dengan nama “simple-map.html” dan tuliskan struktur HTML seperti berikut.

Selanjutnya, silahkan ketikkan baris kode dibawah untuk dapat menampilkan peta provinsi DKI Jakarta dalam implementasi Google Maps Platform untuk Maps Javascript API.

Jangan lupa untuk memasukkan API Key Google Maps Platform Anda dalam tag <script> diatas. Untuk lebih lengkapnya, Anda dapat mencobanya di Jsfiddle disini. Berikutnya akan dijelaskan beberapa catatan dalam implementasi Google Maps Platform untuk Maps Javascript diatas.

Deklarasikan website Anda dalam format HTML5

Anda disarankan untuk melakukan deklarasi HTML5 dalam setiap pengembangan website Anda seperti yang telah Anda lakukan di atas dengan menuliskan:

<!DOCTYPE html>

Mengapa Anda perlu melakukan deklarasi HTML5 seperti di atas? Itu karena sebagian besar peramban saat ini akan merender konten yang dideklarasikan dengan DOCTYPE ini dalam “mode standar” yang berarti website Anda harus lebih kompatibel saat lintas peramban. DOCTYPE dirancang untuk diturunkan dengan anggun, peramban yang tidak memahaminya akan mengabaikannya dan menggunakan “mode quirks” dalam menampilkan kontennya.

Perhatikan bahwa beberapa CSS yang berfungsi dalam mode quirks tidak valid dalam mode standar. Secara khusus, semua ukuran berbasis persentase harus mewarisi dari elemen blok induk, dan jika salah satu dari induk tersebut gagal menentukan ukuran, mereka dianggap berukuran 0 x 0 piksel. Oleh karena itu, Anda perlu menyertakan deklarasi <style> seperti diatas.

Memuat Maps Javascript API

Maps Javascript API dimuat dalam tag <script> yang telah Anda masukan dalam HTML diatas. Dalam implementasi Google Maps Platform untuk Maps Javascript API ini ada 2 cara untuk mendeklarasikan Maps Javascript API, yaitu dengan memasukkan tag <script> dalam HTML seperti diatas atau dipisahkan dari HTML.

<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

Atribut dalam tag script

Perhatikan bahwa dalam tag script yang Anda tulis di atas terdapat beberapa atribut yang harus ada ketika implementasi Google Maps Platform untuk Maps Javascript API.

Src: merupakan URL dimana Maps Javascript API dimuat, termasuk seluruh simbol atau atribut yang dibutuhkan untuk memuat Maps Javascript API. Dalam URL ini terdapat dua parameter yaitu key yang berarti Anda perlu memasukkan API Key Google Maps Platform dan callback merupakan nama fungsi global yang akan dipanggil setelah Maps Javascript API dimuat seluruhnya.
Async: merupakan sebuah proses dimana browser akan diminta untuk mengunduh dan menjalankan script secara asinkron. Ketika script dijalankan, maka akan memanggil fungsi yang ditentukan menggunakan parameter callback diatas.

Element DOM Map

Untuk menampilkan peta dalam sebuah halaman website, Anda perlu melakukan reservasi untuk tempat yang akan ditampilkan. Biasanya, Anda akan melakukan pembuatan nama pada elemen div dan mendapatkan referensi ke elemen div ini pada DOM peramban.

Pada contoh yang sudah Anda buat di atas dalam implementasi Google Maps Platform, Anda menggunakan CSS untuk melakukan pengaturan tinggi peta menjadi “100%” pada #maps. Hal ini akan menyebabkan peta yang Anda tampilkan meluas ke seluruh layar perangkat yang Anda gunakan ketika menampilkannya.

Opsi Maps

Dalam Implementasi Google Maps Platform untuk Dynamic Maps API ini terdapat 2 opsi yang harus dimasukkan ketika ingin memuat Maps Javascript API, yaitu center dan zoom.

Center: merupakan titik tengah dari lokasi yang diinginkan, dalam baris kode diatas yang menjadi titik tengahnya adalah provinsi DKI Jakarta.
Zoom: merupakan jumlah pembesaran pada maps. Semakin besar zoom level nya maka akan semakin dekat tampilan maps nya.

Level pembesaran wajib dimasukkan ketika ingin menampilkan Dynamic Maps API. Ada beberapa level pembesaran atau zoom yang sering digunakan oleh sebagian besar pengembang Google Maps Platform API, diantaranya:

1: Pembesaran level 1 digunakan untuk menampilkan peta dunia.

zoom: 1

5: Pada level 5 ini, Dynamic Maps API akan menampilkan tampilan benua/ daratan.

zoom: 5

10: Untuk menampilkan salah satu kota, Anda bisa menggunakan level pembesaran 10.

zoom: 10

15: Level pembesaran 15 digunakan untuk menampilkan jalan.

zoom: 15

20: Terakhir untuk level pembesaran 20 digunakan untuk menampilkan bangunan atau gedung pada titik tengah (center) tertentu.

zoom: 20

Demikian cara implementasi Google Maps Platform untuk Dynamic Maps API atau Maps Javascript API. Implementasi Google Maps Platform ini diharapkan membuka wawasan dan pengetahuan baru untuk Anda yang akan menggunakan Google Maps Platform sebagai penyedia peta digital interaktif dan kaya dari Google. Terima kasih telah membaca artikel ini jika Anda mendapati kesulitan dalam menerapkan Maps Javasricpt API jadwalkan untuk berkonsultasi langsung bersama kami dengan mengisi form dibawah ini: