Menampilkan peta menggunakan Google Maps API

Menampilkan peta menggunakan Google Maps API

2334
3
SHARE

Dimalam yang sesunyi ini, harviacode akan mencoba menulis tentang bagaimana menampilkan peta dengan menggunakan Google Maps API. Pada kesempatan sebelumnya kita juga pernah menulis tentang bagaimana Menampilkan google map pada halaman HTML. Kali ini cara yang kita gunakan sedikit lebih advance yaitu menggunakan Google Maps API.

Sebelum lebih jauh, kita perlu mengetahui apa sih Google Maps API itu. Google Maps API merupakan salah satu tools yang disediakan oleh google sehingga memungkinkan bagi para developer untuk menampilkan peta dihalaman web maupun di aplikasi mobile. Tidak hanya menampilkan peta, kita juga diijinkan untuk melakukan customisasi pada peta seperti penambahan marker pada peta dan penambahan informasi. Tentu hal ini sangat berguna apabila kita sedang membuat aplikasi yang memiliki peta di dalamnya.

Menampilkan peta menggunakan Google Maps API secara sederhana

Pada contoh berikut kita akan mencoba menampilkan peta secara sederhana menggunakan Google Maps API. Berikut ini adalah langkah langkahnya.

1. Pertama buatlah file index.php, kemudian kita perlu memanggil Google Maps API.
2. Selanjutnya adalah menambahkan properties pada peta yang ingin kita tampilkan. Untuk pilihan properties cukup banyak, namun pada contoh ini kita hanya menggunakan center, zoom dan mapTypeId

Center merupakan titik tengah peta yang ditampilkan, pada contoh ini saya menggunakan bekasi sebagai titik tengah peta.

Zoom digunakan untuk mengatur ukuran zoom peta.

Untuk mapTypeId pilihannya adalah sebagai berikut :
– ROADMAP (peta normal dalam bentuk 2 dimensi)
– SATELLITE (peta dalam bentuk foto satelit)
– HYBRID (peta dalam bentuk foto satelit dilengkapi dengan jalan dan nama kota)
– TERRAIN (peta dalam bentuk gunung, sungai dsb)

3. Membuat div untuk menampilkan peta
4. Membuat Object Peta
5. Menampilkan peta dengan menambahkan listener.

Berikut ini adalah kode index.php beserta dengan catatan langkah langkahnya (sesuai nomor urut langkah langkahnya).

Jalankan file tersebut menggunakan browser maka anda akan mendapatkan tampilan seperti berikut ini.

google maps api

Me load peta secara asynchronous.

Kita juga bisa menampilkan peta setelah seluruh halaman selesai ditampilkan dengan cara mengubah listerner menjadi fungsi berikut ini. (baris 21 s/d 27)

 

Menampilkan banyak peta sekaligus

Kita juga bisa menampilkan banyak peta dengan masing masing properties dalam satu halaman. Berikut ini adalah contohnya

dan ini adalah hasilnya

google maps api

Google mengijinkan kita untuk mengakses peta tersebut ribuan kali perhari. Apa bila kita berencana untuk menggunakan trafic yang lebih besar kita memerlukan Google Maps API Key yang bisa anda dapatkan diĀ  https://console.developers.google.com.

Demikianlah pembahasan singkat mengenai dasar menampilkan peta menggunakan Google Maps API. Pada kesempatan berikutnya kita akan menambahkan customisasi seperti penambahan overlays pada map yaitu marker, polyline, polygon, circle dan informasi windows pada peta.

Semoga bermanfaat, jangan lupa di like dan dishare ya, Terima kasih.

Bagikan artikel ini ya.. terima kasih

3 COMMENTS

    • itu tinggal copy aja mas. udah bisa langsung jalan. nanti langkah berikutnya penambahan marker dan lain lain tinggal ikutin link di bagian bawah artikel.

LEAVE A REPLY