Cara Membuat Peta dari Google Maps API

Liburan telah usai, liburan telah usai, masuk, masuk.. Ayok masuk kerja.. Liburan telah usai, liburan telah usai.. Masuk.. Masuk.. Ayok masuk sekolah :D Horeee, akhirnya liburan telah selesai :( yah bosen lagi deh kita harus mantekin tugas-tugas, kerjaan dan proyek-proyek yang belum bener, huft :'(. Gapapadeh, setelah libur panjang sekarang waktunya mengembangkan diri, penasaran ingin mengexplore kembali mengenai Peta atau suatu lokasi di website akhirnya saya jatuh hati kepada Google Maps. Saya akan coba membuat tutorial sederhana Cara menampilkan Peta suatu Lokasi di Website:

Sebelumnya ada hal yang harus dimengerti terlebih dahulu mengenai Google Maps API Key hanya saya tidak menjelaskan detail disini. Sederhanaya itu adalah Key yang dibutuhkan agar kita bisa memakai API dari google Maps dibawah saya pakai API sbagai contoh, tapi jika ingin benar2 membuat aplikasi sndiri saya sarankan anda mendaftarkan dan membuat Key Google Maps anda sendiri.

Scriptnya Sederhana :

1 2	`<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">` `</script>`

Diantara tag <head> anda memanggigil script agar anda bisa menggunakan API dari google Maps. Jadi pastikan anda tuliskan itu. Key berisi data yang saya jelaskan diatas. Sedangkan sensor itu untuk menjelaskan aplikasi ini menggunakan sensor atau tidak contohnya seperti GPS.

Itu adalah Div dengan id googleMap sederhana yang nantinya jadi tempat untuk menampilkan Peta yang akan kita buat.

Disini dibutuhkan pemahaman javascript yang cukup :

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(-6.194912, 106.822823),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
 
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Pertama Kita buat fungsi dengan nama [contoh] initialize() yang di dalam fungsi tersebut kita devinisikan 2 variabel.

mapProp variable ini berisi data configurasi atau settingan untuk peta yang akan kita tampilkan. Ada 3 contoh jenis config

center : disini kita definisikan kode koordinat lokasi yang menjadi bagian tengah peta. Diatas saya contohkan koordinat Bunderan HI, Jakarta
zoom : kita definisikan besaran Zoom dari Peta, semakin besar nilainya semakin Detail tampilan peta yang kita tampilkan

map Variable ini kita jalankan objek yang berasal dari API Goolge maps, yang berisi 2 parameter
1. document.getElementById(“googleMap”) ini untuk menyeleksi element div yang sudah kita buat diatas dengan id googleMap
2. mapProp ini adalah nama variabel yang sudah kita buat diatas.
3. mapTypeId adalah jenis peta yang ingin kita tampilkan, ada beberpa pilihan : ROADMAP, SATELLITE, HYBRID, TERRAIN

google.maps.event.addDomListener(window, ‘load’, initialize);

itu adalah perintah yang digunakan untuk menambahkan listener yang intinya Saat halaman diload dia akan menjalankan fungsi initialize()

Mungkin seperti itu penjelasan sederhananya.

Contoh script :

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
 
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(-6.194912, 106.822823),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
 
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap"></div>
 
</body>
</html>

Semoga bermanfaat guys, selamat mengisi waktu luang kerja atau sekolah kalian guys! Keep high guys :p jangan lupa kopinya buat nemenin coding, happy coding ^_^ :D :p :D

Cara Membuat Peta dari Google Maps API

0 Response to "Cara Membuat Peta dari Google Maps API"