Menampilkan google map pada halaman HTML

Menampilkan google map pada halaman HTML

3643
1
SHARE

Pasti anda pernah melihat halaman web dimana didalamnya terdapat google map yang menunjukkan suatu lokasi. Biasanya dipakai juga untuk menunjukkan alamat suatu kantor / perusahaan. Bila anda mengira membuatnya adalah suatu hal yang sulit, anda salah besar. hehehe.. untuk membuatnya ternyata sangat-sangat mudah. (tinggal copas doang). hahaha. Untuk membuatnya kita memanfaatkan Google Maps Javascript API V3.

googlemap

Manampilkan google map pada halaman HTML

Berikut ini kita akan membuat halaman web dengan peta didalamnya yang menunjuk ke titik Monumen Nasional di Jakarta. Buatlah lah file index.html dan masukkan kode berikut ini

Sedikit penjelasan :

Yang perlu menjadi perhatian yaitu div dengan id=map yaitu merupakan element yang digunakan untuk menampilkan peta. Anda dapat mengatur ukuran div dll menggunakan CSS. Dengan membungkusnya dalam element div kita bisa lebih leluasa mengatur letak peta yang ingin kita tampilkan.

Berikutnya adalah koordinat -6.176587,106.827115 yang merupakan koordinat dari Monumen Nasional di Jakarta. Bagaimana cara mendapatkan koordinat suatu tempat ? caranya cukup mudah, bukalah google map, kemudian cari alamat yang ingin anda cari. Kemudian klik pada titik yang ingin anda ketahui koordinatnya, maka pada bagian kiri atas (dibawah kotak pencarian) akan muncul koordinat dari titik tersebut.  Sekarang tinggal masukkan koordinat tersebut ke dalam kode javascript di atas.

Yang terakhir yaitu menambahkan marker pada lokasi koordinat tersebut. Penambahan marker merupakan salah satu dari sekian banyak customisasi yang dapat kita terapkan pada google map API.

Untuk pengaturan lainnya anda dapat melihatnya di https://developers.google.com/maps/documentation/javascript/reference. Demikianlah cara menampilkan google map pada halaman HTML. Mudah bukan…

Jangan lupa komentar ya.. terima kasih

Bagikan artikel ini ya.. terima kasih

1 COMMENT

LEAVE A REPLY