Hello sobat programming! Kali ini saya akan sharing tutorial menambahkan Google Map pada website yang sedang kita buat.
Oke langsung saja kita meluncur ke script! Dalam contoh ini saya akan membuat halaman baru.
Pertama-tama buatlah file HTML sederhana dengan struktur sebagai berikut :
Dalam script diatas kita bisa lihat tag "
Langkah selanjutnya, import-lah library dari Google Map itu sendiri. Tambahkanlah tag(sesudah tag "
Oke, kita sudah meng-import Google Map library dari Google Apis. Tinggal satu langkah lagi!
Dalam tag "
#Sedikit penjelasan : Ada beberapa kode yang cukup penting dalam script diatas untuk dipahami.
Oke, kurang lebih full scriptnya adalah seperti ini :
Selesai! sekarang coba running file yang sudah dibuat tadi ...
Bisa? Selamat! Oke kurang lebih hasilnya seperti gambar dibawah ini :
Baiklah sobat, kita sudahi dulu tutorial kali ini. Pada tutorial selanjutnya, saya akan memodifikasi Map yang sudah kita buat ini dengan Google Marker.
Semoga bermanfaat :)
Oke langsung saja kita meluncur ke script! Dalam contoh ini saya akan membuat halaman baru.
Pertama-tama buatlah file HTML sederhana dengan struktur sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
</head>
<body>
<div id="my-map"></div>
</body>
</html>Dalam script diatas kita bisa lihat tag "
<div id="my-map"></div>" yang nantinya akan menjadi frame atau kerangka untuk Map yang akan kita import nanti.Langkah selanjutnya, import-lah library dari Google Map itu sendiri. Tambahkanlah tag(sesudah tag "
</title>") :<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>Oke, kita sudah meng-import Google Map library dari Google Apis. Tinggal satu langkah lagi!
Dalam tag "
<head>" setelah "</title>" Ketiklah atau cukup copy-paste script JS(Javascript) dibawah ini. Script ini bertujuan untuk memanggil fungsi dari file library yang sudah kita panggil tadi.<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(-6.453720, 106.956310),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('my-map'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>#Sedikit penjelasan : Ada beberapa kode yang cukup penting dalam script diatas untuk dipahami.
- "
zoom: 11" : Kode ini berfungsi sebagai level zooming bagi Map anda. Semakin tinggi nilai zoom, maka Map yang ditampilkanpun akan terlihat lebih dekat. - "
google.maps.LatLng(-6.453720,106.956310)" : Angka tersebut sangatlah penting untuk menentukan titik tengah dari Map saat pertama kali load. (Dalam contoh ini koordinat yang dipakai adalah "Klapanunggal, Indonesia") - "
MapTypeId.ROADMAP" : Sobat bisa berkreasi dengan mengubah kode diatas. Ini berfungsi akan seperti apakah tipe Map yang akan dibuat. Value lain yang bisa sobat gunakan adalah :MapTypeId.ROADMAP: Menampilkan jalan(default view)MapTypeId.SATELLITE: Menampilkan gambar dari satelit Goggle Earth.MapTypeId.HYBRID: Menampilkan gambar campuran dari pandangan normal & SatelitMapTypeId.TERRAIN: Menampilkan peta fisik berdasarkan Terrain.
- "
document.getElementById('my-map')" : Kode ini adalah untuk penentu selektor mana yang akan Google Map pakai. Tentu saja dalam contoh ini adalah "<div id="my-map"></div>"
<style type="text/css" media="screen">
#my-map{
display: block;
width: 600px;
height: 300px;
border: 2px solid #373737;
margin: 20px auto;
}
</style>Oke, kurang lebih full scriptnya adalah seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<style type="text/css" media="screen">
#my-map{
display: block;
width: 600px;
height: 300px;
border: 2px solid #373737;
margin: 20px auto;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; function initialize() { var mapOptions = { zoom: 11, center: new google.maps.LatLng(-6.453720,106.956310), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('my-map'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="my-map"></div> </body> </html>
Selesai! sekarang coba running file yang sudah dibuat tadi ...
Bisa? Selamat! Oke kurang lebih hasilnya seperti gambar dibawah ini :
Baiklah sobat, kita sudahi dulu tutorial kali ini. Pada tutorial selanjutnya, saya akan memodifikasi Map yang sudah kita buat ini dengan Google Marker.
Semoga bermanfaat :)
.png "English"){kind=small}
0 komentar:
Posting Komentar