Menampilkan Icon/ Marker dan Window Info

Posted: December 2, 2010 in Maps Dasar
Tags: , , ,

Setiap melihat Google Maps baik di websites resmi atau dari website lain, biasanya kita melihat beberapa icon yang menunjukkan informasi khusus dan ketika diklik icon tersebut akan menampilkan informasi yang dimiliki. seperti tampilan berikut ini :

Bagaimana cara untuk memasukkan icon tersebut ke websites kita. Sebelumnya kita kembali ke script awal yang pernah kita buat untuk menampilkan peta dasar

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>latihan-1</title>
    <script class="hiddenSpellError"><!--mce:0--></script>
key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw"
type="text/javascript"></script>
  </head>
  <body onunload="GUnload()">
<div id="map" style="width: <span class=;">550px; height: 450px"></div>
    <noscript>mce:1</noscript>
    <script type="text/javascript">

    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(-4.039618,114.65332),4);

    }
    else {
      alert("Sepurane rek.., Google Maps tidak bisa dibuka dengan browser ini");
    }
    </script>
  </body>
</html>

Kita tambahkan Fungsi baru untuk membuat marker dan menampilkan info.  Aksi ini akan berlaku ketika icon tersebut diklik

function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
    }

lalu tambahkan kode , dibawah inisialisasi map.setCenter(new GLatLng(-4.039618,114.65332),4);

var point = new GLatLng(-7.231699,112.368164);
      var marker = createMarker(point,'Marker WIndow 1, dari icon yang anda klik')
      map.addOverlay(marker);

      var point = new GLatLng(-6.489983,107.138672);
      var marker = createMarker(point,'Marker WIndow 2, dari icon yang anda klik')
      map.addOverlay(marker);

      var point = new GLatLng(-0.747049,113.862305);
      var marker = createMarker(point,'Marker WIndow 3, dari icon yang anda klik')
      map.addOverlay(marker);

      var point = new GLatLng(-3.294082,126.870117);
      var marker = createMarker(point,'Marker WIndow 4, dari icon yang anda klik')
      map.addOverlay(marker);

disini kita tambahkan 4 Marker secara langsung.😀 dari scriptnya kan keliatan kalo ada 4 inisialisasi point.

Contoh salah satu marker point

      var point = new GLatLng(-6.489983,107.138672);
      var marker = createMarker(point,'Marker WIndow 2, dari icon yang anda klik')
      map.addOverlay(marker);

Setelah semua selesai, panggil halaman yang anda buat dibrowser, biasanya tampilan program akan seperti ini

Selamat Mencoba..😀

CMIIW……😀

Comments
  1. maman says:

    kang, gimana kalo data lokasinya dari tabel mysql? thx ya..

  2. Wulan Apriliyanti says:

    Selamat malam, saya April. Saya udah coba source code dari mas ini. Tapi kok ga bisa nongol ya markernya? apa yang salah? apa mungkin karena GBrowserIsCompatible itu?
    Saya menggunakan chrome. Terima kasih.

    • kurniawandwi says:

      terima kasih mbak april sudah mau baca ni blog.
      😀 saya juga pakai chrome kok😀 lancar aj😀

      mungkin ada salah penulisan atau penempatan mbak, gini aj lebih mudahnya, mbak pakai firefox, trus install plugin firebug.
      nanti keliatan apa yg error, biasanya sih dr penulisan atau penempatan script yg salah, ntar keliatan kok errornya..

  3. dudunk00 says:

    bro gue uda coba…. tp koq gak mau kluar event klick na yah,..???
    trus function createmarker na tuh ditaruh sebelah mna yach.?

    • kurniawandwi says:

      ada error mungkin, coba cek pake firebug, plugin firefox. ntar keliatan errornya dmananya.

      createmarker sebenarnya terserah u, asal msh dalam lingkup initialize() aj.

  4. linghuchu says:

    mas ada contoh lain yang tidak menggunakan script GBrowserIsCompatible misal’y

    coz ane buka selalu gak mau nampil map’y pake dibrowser firefox,chrome, dan IE

    yg tampil dibrowser cuma tulisan ini key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw” type=”text/javascript”>
    550px; height: 450px”>

  5. febri says:

    Wahh trimakasih mas untuk semua tutorial2nya, kbetulan sangat membantu tugas akhir saya, Sekali lg trimakasih untuk share ilmunya semoga bermanfaat

  6. ridho says:

    bos,, mau tanya,, script untuk menentukan rute (A) ke (B) , tetapi disini rute (A) sudah secara otomatis mendeteksi posisi perangkat yang kita gunakan, dan rute (B) kita yang menentukan,, atas perhatianya terima kasih,,
    mohon pencerahanya,, walangijoe@yahoo.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s