Menampilkan Maps Pada Halaman Web Menggunakan Google Maps JavaScript API v3

Kali ini kita akan mencoba untuk menampilkan map yang disediakan google pada halaman web yang kita buat, yang nantinya hasil akhirnya akan seperti ini :

awal

 

Untuk menggunakan google API kita harus memiliki ijin, ijin yang diberikan google berupa API key. Nah jangan khawatir ga perlu ngeluarin kocek ko untuk dapet API key tersebut, cukup mempunyai akun google aja (gmail).

Eh sebelum beranjank ke langkah mendapatkan API key sebaiknya kita familiar ya dengan javascript untuk mempelajari tutorial ini.

Lanjut yuk, ini langkah mendapatkan API key nya:

map1

  •  Klik link services yang ada di sebelah kiri menu

map 2

  • Setelah itu scroll ke bawah, sampai menemukan tuliasan Google Maps JavaScript API v3 dalam All Services , klo udah nemu ubah statusnya menjadi ON.

map 3

  •  Setelah itu klick API Access di di bagian kiri menu untuk melihat API key yang diberikan 😀

map 4

 

Oke kita sudah mendapatkan API key nya. Sekarang kita sudah siap menampilkan map pada halaman web yang kita buat.

Pertama tama buat lah file dengan nama map.html dan salinlah code dibawah ini :

map 5

Klo sudah save file nya. Dan coba run melalui web browser yang dimiliki, chrome, IE atau yang lainnya. Maka tampilan hasilnya kalo misalnya tidak error akan seperti ini :

awal

Penjelasan :

css

Code diatas merupakan style css yang diberikan pada html body dan id (id yang di beri nama map-canvas), id map-canvas ini nantinya untuk menaruh map yang akan kita buat.

map6

Kode diatas meload atau menyertai url dimana lokasi file javascript yang digunakan untuk google map API da nada parameter key nah itu API key yang sudah kita punya. Ada pun parameter sensor gunanya untuk menyertai apakah aplikasi yang digunakan menggunakan sensor atu tidak contohnya GPS.

inizi

Var map optioan untuk menginisialisasi map diamana didalam contoh diatas terdapat properti center yang tujuannya mengatur titik tengah (koordinat) dimana tempat yang kita inginkan. (pada contoh diatas merupakan koordinat dari kota Bndung, Jawa Barat). Selanjutnya ada properti zoom yang gunanya untuk mengatur display resolusi pada saat map ditampilkan pada halaman.

taro

Class di atas gunanya untuk menempelkan map yang sudah kita atur dalam element html yang id nya itu map-canvas. Dalam contoh kali ini kita menggunakan div.

event

Kode diatas merupakan salah satu penanganan event yang disediakan Google Maps JavaScript API yang artinya gini panggil fungsi initialize ketika halaman di load.

html

Kode diatas merupakan tag html dimana div menggunakan id = “map-canvas” yang nantinya akan menampilkan map.

Terimakasih 😀

 

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s