Kamis, 10 Februari 2011

Dasar Pemprograman Google Map API V3 (Part 1) : The "Hello, World" of Google Maps v3

5 comments




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


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="petajogja"
  5. content="initial-scale=1.0, user-scalable=no" />
  6. <style type="text/css">
  7. html { height: 100% }
  8. body { height: 100%; margin: 0px; padding: 0px }
  9. #map_canvas { height: 100% }
  10. </style>
  11. <script type="text/javascript"
  12. src="http://maps.google.com/maps/api/
  13. js?sensor=set_to_true_or_false">
  14. </script>
  15. <script type="text/javascript">
  16. function initialize() {
  17. var latlng = new google.maps.LatLng(-7.808671167743087, 110.36560535430908);
  18. var myOptions = {
  19. zoom: 8, center: latlng,
  20. mapTypeId: google.maps.MapTypeId.ROADMAP
  21. };
  22. var map = new google.maps.Map
  23. (document.getElementById("map_canvas"),
  24. myOptions);}
  25. </script>
  26. </head>
  27. <body onload="initialize()">
  28. <div id="map_canvas"
  29. style="width:100%; height:100%"></div>
  30. </body>
  31. </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.

  1. function initialize() {var latlng = new google.maps.LatLng
  2. (-7.808671167743087, 110.36560535430908); var myOptions = 
  3. {zoom: 8,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP}; 
  4. var map = new google.maps.Map(document.getElementById
  5. ("map_canvas"),myOptions);
  6. }

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 .



  1. id="map_canvas" style="width:100%; height:100%"&gt;

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
 


 

5 Responses so far

  1. atoy says:

    pagi pak admin . . . saya masih awam sekali,
    mau tanya, contoh script sederhana diatas itu di taruhnya di mana ?
    mohon penjelasannya lebih detail dong . . . .

    ma'kasih... salam kenal,
    atoydep@yahoo.co.id

  2. kk admin says:

    script diatas d taruh di tag html.. tar posting brikutny saya jelaskan.. Buka aja link map diatas trus pada browser m0zilany liat source code. Tar keliatan script lengkapny.

  3. atoy says:

    ma'kasih kk admin . . . . .
    d tunggu postingan berikutnya . . . . .

  4. @atoy : ni toy.. mungkin artikel saya berikut lebih mudah dipahami ..

    Tutorial Google Map API : Membuat Peta lokasimu sendiri

  5. kita juga punya nih artikel mengenai 'Google API', silahkan dikunjungi dan dibaca , berikut linknya
    http://repository.gunadarma.ac.id/bitstream/123456789/1105/1/50407046.pdf
    trimakasih
    semoga bermanfaat

Leave a Reply

Ada pertanyaan dengan posting ini?
silahkan isi komentar, pada bagian "Beri komentar sebagai" pilih dengan "Name/URL" (nama dan alamat web, alamat web bisa dikosongkan) ...