Membuat Peta dari Google Maps API

mapsLiburan waktunya mengembangkan diri, penasaran ingin mengexplore kembali mengenai Peta atau suatu lokasi di website akhirnya saya jatuh hati kepada Google Maps, Pasti. 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 :

<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.

<div id=”googleMap” style=”width:500px;height:380px;”></div>

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.

  1. mapProp variable ini berisi data configurasi atau settingan untuk peta yang akan kita tampilkan. Ada 3 contoh jenis config
    1. center : disini kita definisikan kode koordinat lokasi yang menjadi bagian tengah peta. Diatas saya contohkan koordinat Bunderan HI, Jakarta
    2. zoom : kita definisikan besaran Zoom dari Peta, semakin besar nilainya semakin Detail tampilan peta yang kita tampilkan
  2. 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 terima kasih, selamat belajar.. happy Codding😀

5 thoughts on “Membuat Peta dari Google Maps API

  1. Terimakasih banyak atas ilmu baru ini gan, menurut saya ini ilmu baru kerena baru pertama kalinya saya berkunjung kesini, o ya gan ulasannya menarik n salam kenal, jika ada kesempatan berkunjunglah, jangan lupa tinggalkan komentar agar saya berkunjung kembali kesini dan mohon sundulin iklan yang ada hehe….

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