Tutorial Google Maps V3: Memberi Penanda (Marking) Suatu Titik Lokasi

Tutorial Google Maps V3: Memberi Penanda (Marking) Suatu Titik Lokasi

Tutorial Information

ProgramGoogle Maps
VersionV3
DifficultyStandar
Estimated Time15 Menit

Tentu sudah tidak asing lagi bagi kita apa itu Google Maps. Google Maps adalah layanan peta digital yang disediakan secara open source (gratis) oleh…

Tentu sudah tidak asing lagi bagi kita apa itu Google Maps. Google Maps adalah layanan peta digital yang disediakan secara open source (gratis) oleh Google. Bagi para pengembang web, Google Maps sangat membantu ketika membuat aplikasi web yang membutuhkan peta interaktif. Selain fitur dan dokumentasinya yang lengkap, tutorial-tutorial penggunaan Google Maps yang tersedia di internet pun semakin banyak.

Google Maps sering digunakan untuk menampilkan informasi suatu titik lokasi. Ketika titik lokasi tersebut di-klik, maka secara otomatis akan menampilkan informasi tambahan (dapat berupa teks, gambar, atau video). Pada tutorial kali ini akan dijelaskan bagaimana cara membuat peta sekaligus memberi penanda untuk sebuah lokasi pada Google Maps.

1. Buatlah sebuah script HTML biasa dengan nama index.html. Kode “<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>”ini merupakan alamat khusus yang harus dimasukkan ketika menggunakan pustaka (library) Google Maps.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Marking Satu Lokasi</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

</head>

<body>
<center>

<h4>Marking Satu Lokasi</h4>
<div id="map"></div>

</center>
</body>
</html>

2. Karena Google Maps berbasis JavaScript, maka pengaturan Google Maps juga harus ditambahkan kode JavaScript di dalam kode HTML tersebut. Letakkan kode JavaScript berikut di dalam tag <head>.

<script type="text/javascript">
          (function() {
               window.onload = function() {

               // Membuat konfigurasi umum peta berbasis Google Maps
               // zoom: untuk perbesaran/skala peta;
               // center: untuk menentukan titik koordinat tengah peta;
               // mapTypeId: untuk menentukan tipe peta yang digunakan;
               var options = {
                    zoom: 12,
                    center: new google.maps.LatLng(-7.78288, 110.36704),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
               };

               // Membuat objek peta Google Maps, memanggil elemen HTML dengan id = 'map' 
               var map = new google.maps.Map(document.getElementById('map'), options);

               // Menambahkan marker (penanda) ke dalam peta
               var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(-7.78288, 110.36704),
                    map: map,
                    title: 'Klik Saya'
               });

               // Membuat InfoWindow dengan memunculkan informasi tambahan ketika di-klik
               var infowindow = new google.maps.InfoWindow({
                    content: 'Ini adalah Tugu Jogja'
               });

               // Menambahkan event Click pada penanda
               google.maps.event.addListener(marker, 'click', function() {

               // Memanggil 'open method' InfoWindow
               infowindow.open(map, marker);
               });

               };
          })();
</script>

Jika diperhatikan, script di atas akan memanggil elemen HTML dengan id = map untuk menampilkan peta. Penjelasan detail mengenai baris-baris kode tersebut ada di dalam komentar script.

3. Langkah selanjutnya yaitu menambahkan kode CSS untuk menentukan seberapa besar ukuran bingkai peta tersebut akan ditampilkan. Letakkan kode CSS berikut ini di dalam tag <head>. Pada contoh ini ukuran map yang diberikan adalah 500px x 400px.

<style>
          html, body {
               font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
               font-size: medium;
               }
          #map {
               width: 500px;
               height: 400px;
               border: 1px solid black;
          }
</style>

4. Apabila semua kode tersebut digabungkan secara keseluruhan, maka file index.html akan berisi kode-kode sebagai berikut.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Marking Satu Lokasi</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>
          html, body {
               font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
               font-size: medium;
               }
          #map {
               width: 500px;
               height: 400px;
               border: 1px solid black;
          }
</style>

<script type="text/javascript">
          (function() {
               window.onload = function() {

               // Membuat konfigurasi umum peta berbasis Google Maps
               // zoom: untuk perbesaran/skala peta;
               // center: untuk menentukan titik koordinat tengah peta;
               // mapTypeId: untuk menentukan tipe peta yang digunakan;
               var options = {
                    zoom: 12,
                    center: new google.maps.LatLng(-7.78288, 110.36704),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
               };

               // Membuat objek peta Google Maps, memanggil elemen HTML dengan id = 'map' 
               var map = new google.maps.Map(document.getElementById('map'), options);

               // Menambahkan marker (penanda) ke dalam peta
               var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(-7.78288, 110.36704),
                    map: map,
                    title: 'Klik Saya'
               });

               // Membuat InfoWindow dengan memunculkan informasi/teks ketika di-klik
               var infowindow = new google.maps.InfoWindow({
                    content: 'Ini adalah Tugu Jogja'
               });

               // Menambahkan event Click pada penanda
               google.maps.event.addListener(marker, 'click', function() {

               // Memanggil 'open method' InfoWindow
               infowindow.open(map, marker);
               });

               };
          })();
</script>
</head>

<body>
<center>

<h4>Marking Satu Lokasi</h4>
<div id="map"></div>

</center>
</body>
</html>

5. Tampilan peta berbasis Google Maps di browser Anda seharusnya nampak seperti gambar berikut.

Hasil Akhir Peta

Hasil Akhir Peta Berbasis Google Maps

Sampai saat ini versi terbaru Google Maps adalah versi 3. Versi terbaru ini merupakan hasil penambahan stabilitas library Google Maps dari versi sebelumnya, salah satunya yaitu dukungan penuh untuk implementasi pada perangkat bergerak (mobile web/apps). Masih ada banyak trik lain yang bisa dikembangkan melalui eksplorasi Google Maps JavaScript APIV3 ini. Untuk itu, simak terus trik-trik terbaru yang disuguhkan oleh BisaKomputer. :D

Tag: , , , ,

19 Comments

Leave Comment
  1. hakim nur says:

    mantap pak nih cocoknya buat apa ya??
    apa buat contact ya

  2. Mustofa says:

    wah bagus nih, tapi bisa dak yah markernya berupa inputan file xml?

  3. Tri Alfiani says:

    gan.. aplikasi apa yg dipake utk script nya ini ?

  4. dien says:

    mas… kalo mau buat zoom automatis di maps gimna ya?? misalkan zoom keseluruhan = 5 ketika kita menambah option cari, kita mencari suatu desa maka zoom nya itu berubah otomatis..makasih mas.

  5. alfan says:

    terima kasih sekali kang mas…

  6. Roni says:

    Terima kasih banyak gan, dengan script anda ini tugas akhirku bisa jalan juga setelah 2 minggu mencoba banyak script yang lain gak bisa jalan. :)

  7. Ricky says:

    gan…mau nanya ne…
    plis bantu..

    untuk membuat marker di google map yang dipanggil dari database berdasarkan id_daerah yang dipilih gimana ya ??

    kasusnya gini :

    misal :

    a.Kantor Pos
    b.Lapangan Bola
    c.Bandara

    Ketika saya klik Kantor Pos, yang saya inginkan hanya titik koordinat / marker dari kantor pos saja yang tampil, dan datanya diambil berdasarkan id yang didapat dari database… begitu juga dengan marker tempat yang lain..

    mohon pencerahannya gan…

    terima kasih sebelumnya….

  8. Akhmad Rifai says:

    Mat Kenal pa, saya punya konsep dan program di area sepak bola, saya butuh kerjasama dengan programmer Komputer.
    info selengkapnya Hub :
    Akhmad : 081228568266
    Terima kasih

  9. irfan efendi says:

    pak disitu kan tempatnya di tugu jogja, kalau mau dirubah surabaya gimana pak padahal logaritmanya udah diganti…..

  10. hendry says:

    makasih banget gan buat sharingnya

    ada tutorial yang lebih complete ?
    misalnya bisa add mark dan sebagainya..

  11. hendryjping says:

    makasih banget gan buat sharingnya

    ada tutorial yang lebih complete ?
    misalnya bisa add mark dan sebagainya..

  12. hendryjping says:

    makasih banget gan buat sharingnya

    ada tutorial yang lebih complete ?
    misalnya bisa add mark dan sebagainya..

  13. Sangat berguna bagi pengguna google map artikel ini. Kita dapat mengetahui titik tolaksi yang kita tuju.

  14. zulhamdi says:

    terima kasih atas postingannya. sangat membantu.
    ada tutorial buat marker lebih dari satu gak? atau pkek file xml/kml gitu.
    terus kalo ada tutorial navigasinya hehe.

    thanks

Write Comment

Your email will not be published. The marked label is required.