Cara termudah untuk mulai belajar tentang Google Maps API adalah untuk melihat contoh sederhana. Kali ini di BlogNetizen, saya akan memberikan contoh paling dasar dalam pemprograman Google Map API versi 3 yakni menampilkan peta sederhana. Pada Google Map API 3 akan banyak terlihat sama dengan versi sebelumnya (versi 2). Namun, ada beberapa perbedaan, jadi silakan membaca dokumen ini :D
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="petajogja"
- content="initial-scale=1.0, user-scalable=no" />
- <style type="text/css">
- html { height: 100% }
- body { height: 100%; margin: 0px; padding: 0px }
- #map_canvas { height: 100% }
- </style>
- <script type="text/javascript"
- src="http://maps.google.com/maps/api/
- js?sensor=set_to_true_or_false">
- </script>
- <script type="text/javascript">
- function initialize() {
- var latlng = new google.maps.LatLng(-7.808671167743087, 110.36560535430908);
- var myOptions = {
- zoom: 8, center: latlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map
- (document.getElementById("map_canvas"),
- myOptions);}
- </script>
- </head>
- <body onload="initialize()">
- <div id="map_canvas"
- style="width:100%; height:100%"></div>
- </body>
- </html>
dari contoh script sederhana diatas,
1. aplikasi menggunakan HTML5 dengan deklarasi <!DOCTYPE html> .
2. Maps JavaScript API menggunakan tag script.
3. elemen div bernama "map_canvas" untuk petanya.
5. fungsi JavaScript ditulis untuk membuat "peta"objek.
- function initialize() {var latlng = new google.maps.LatLng
- (-7.808671167743087, 110.36560535430908); var myOptions =
- {zoom: 8,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
- var map = new google.maps.Map(document.getElementById
- ("map_canvas"),myOptions);
- }
Keterangan dari script diatas bahwa peta pertama saat ditampilkan, maka titik tengah peta berada di koordinat peta Yogyakarta (-7.808671167743087, 110.36560535430908)
, dengan Zoom tingkat 8 (semakin besar nilainya semakin dekat petanya), peta ditampilkan dalam type RoadMap. Dan Pada contoh di atas, kita mendefinisikan
bernama "map_canvas"
Type peta lainny
* ROADMAP menampilkan peta 2D dari Google Maps.
* SATELLITE menampilkan peta Citra Satelit dari Google Maps.
* HYBRID menampilkan peta Citra Satelit bserta nama jalan dan kotanya dari Google Maps.
* TERRAIN menampilkan bentuk permukaan bumi .
- id="map_canvas" style="width:100%; height:100%">
Peta yang telah didefiniskan dalam div id="map_canvas" ditampilkan dalam ukuran panjang dan lebar 100% / satu layar penuh. Ukuran dapat kita sesuaikan dengan kebutuhan.. :D
Hasilnya dapat kamu lihat disini >> Peta Jogja
Ok begitu saja, tunggu tutorial berikutnya masih di www.blognetizen.blogspot.com :D
Artikel terkait :
Tutorial Google Map API : Membuat Peta lokasimu sendiri
