Menambahkan overlays pada Google Maps API

Menambahkan overlays pada Google Maps API

1259
2
SHARE

Pada kesempatan sebelumnya kita telah membahas tentang cara menampilkan peta pada halaman web dengan menggunakan Google Maps API. Kali ini kita akan menggunakan overlays pada google maps api.

Tetapi sebelumnya perlu kita perlu mengetahui bahwa Google Maps API menyediakan beberapa jenis overlay, yaitu sebagai berikut :
Marker yaitu overlay untuk satu lokasi di peta. Marker default bisa bisa ganti menggunakan icon gambar.
Polyline yaitu garis yang mengubungkan beberapa titik.
Polygon yaitu mirip seperti polyline namun dalam bentuk tertutup sehingga menyerupai bangun datar.
Circle dan Rectangle yaitu berupa lingkaran dan kotak.
Info Windows yaitu jendela berupa pop up yang digunakan untuk menampilkan informasi tertentu.
Custom Overlays

Baiklah untuk lebih memahami langsung saja kita praktekkan satu satu contoh contoh tersebut di atas. Oia kita masih menggunakan file kemarin yang digunakan untuk menampilkan peta ya. Kita hanya akan melakukan sedikit modifikasi.

Marker

Untuk menambahkan marker kita cukup menambahkan baris 19 s/d 23. Berikut ini adalah kode untuk index.php

 

Apabila kita jalankan di browser maka berikut ini adalah hasilnya.

google maps marker

Kini peta kita telah memiliki marker di dalamnya. Kita bisa menambahkan lebih dari satu marker. Kita juga bisa mengubah marker standar dengan gambar. Caranya cukup menambahkan properties berikut ini

Dan berikut ini adalah hasil peta menggunakan gambar sebagai marker.

google maps marker image

Polyline

Berikut ini adalah contoh menampilkan polyline pada map.

Berikut ini adalah hasilnya

google maps polyline

Polygon

Untuk polygon berikut ini adalah contohnya

Berikut ini adalah hasilnya

google maps polygon

Circle

Berikut ini adalah kode untuk menampilkan circle overlays pada map

Hasilnya adalah sebagai berikut

google maps circle

Info Windows

Berikut ini adalah contoh kode untuk menampilkan info windows pada Google Maps API

dan ini adalah hasilnya

google maps marker info window

Demikianlah pembahasan kita mengenai cara menambahkan overlays pada Google Maps. Semoga bermanfaat, jangan lupa di like dan di share ya. Terima kasih telah berkunjung ke harviacode.com.

Bagikan artikel ini ya.. terima kasih

2 COMMENTS

  1. Mas, mau tnya kalau menampilkan beberapa peta secara bersama-sama dalam satu peta google maps yang dipicu dengan checkbox gmna mas? thanks

LEAVE A REPLY