Scribd Logo
Unggah

Selamat datang di Scribd!

  • Marker Map

    Diunggah oleh

    Asep Rifai
    16 tayangan2 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    16 tayangan2 halaman

    Marker Map

    Diunggah oleh

    Asep Rifai

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 2

    Apa itu Marker?

    Marker adalah penanda berupa titik. Marker umumnya digunakan untuk menandakan lokasi-
    lokasi tertentu yang ingin ditampilkan kepada pengguna.

    Menambahkan Marker

    Pada Google Maps API versi 3, marker dibuat dengan menginisiasi objek marker dengan
    syntax new.google.maps.Marker(). Struktur syntax secara lengkap adalah sebagai berikut:

    marker=new google.maps.Marker({Opsi marker (Posisi, icon, Click, dll)});

    Kode di bawah adalah contoh lengkap untuk menampilkan sebuah marker. Hasil running dari
    kode ini dapat dilihat pada gambar 1.

    <!DOCTYPE html>
    <html>

    <head>
    <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
    function initialize() {
    var mapOptions = {
    center: new google.maps.LatLng(-7.750791077369155, 114.27492204232718),
    zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), 

    mapOptions);
    var lokasi=new google.maps.LatLng(-7.750791077369155, 114.27492204232718);
    var marker=new google.maps.Marker({
    position:lokasi,
    animation:google.maps.Animation.BOUNCE
    });
    marker.setMap(map);
    }
    google.maps.event.addDomListener(window,'load',initialize);
    </script>
    </head>
    <body>
    <div id="map-canvas" style="width:700px;height:500px" />
    </body>
    </html>
    Gambar 1. Tampilan Google Maps dengan Marker

    Penjelasan Kode

    Pada bagian ini yang menjadi fokus adalah kode bagian

    var lokasi=new google.maps.LatLng((-7.750791077369155, 114.27492204232718);


          var marker=new google.maps.Marker({
          position:lokasi,
          animation:google.maps.Animation.BOUNCE
          });
    marker.setMap(map);

    1. Pertama kali dibuat sebuah variabel dengan nama lokasi. Variabel ini berupa posisi
    koordinat dalam lintang dan bujur. Lokasi ini kemudian akan digunakan sebagai posisi
    marker di atas peta.
    2. Inisiasi sebuah marker dengan nama marker. Kemudian diatur pilihan-pilihannya, dalam
    hal ini berupa posisi dan animasi marker. Selain itu terdapat pilihan-pilihan lainnya yang
    dapat diatur di antaranya:

     icon: untuk menentukan gambar marker (string)


     clickable: untuk membuat marker dapat diklik atau tidak (boolean)
     dragable: untuk mengatur apakah marker dapat digeser atau tidak (boolean)
     visible: untuk mengatur marker terlihat atau tidak (boolean)
     label: untuk menambahkan label pada marker (string)
     opacity: untuk mengatur transparansi, dengan nilai 0-1 (number)

    3. Marker ditambahkan di atas peta dengan metode setMap().

    Demikianlah penjelasan bagaimana menambahkan marker pada google map. Semoga


    bermanfaat. Anda dapat mempelajari lebih lanjut tentang google maps API di situs

    Anda mungkin juga menyukai