Marker Point Maps dengan XML file

Posted: December 3, 2010 in Maps Lanjutan
Tags: , , ,

Dasar-dasar maps sudah dibahas disini, namun ada satu dasar yang terlupakan, bagaimana memasukkan data point melalui file / database. disini kita akan membahas bagaimana mengambil point dari file .xml. sebenarnya banyak sekali cari mengambil point, mulai dari text file sampai dengan mengambil dari database. Semua itu tergantung kreatifitas anda semuanya.

Pertama, kita buat .xml file untuk menyimpan point dan informasi yang dibutuhkan, contoh

<markers>
 lng="112.368164" html="Informasi ke-1" title = "Jin Botol Link - 1" />
 lng="113.862305" html="Informasi ke-2" title = "Jin Botol Link - 2" />
 Botol Link - 3" />
 Botol Link - 4" />
 Botol Link - 5" />
</markers>

Simpan dengan nama info.xml

kedua, kita sesuaikan script yang sbeelumnya telah kita buat. disini saya langsung berikan contoh scriptnya

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    latihan XML
    <script class="hiddenSpellError"><!--mce:0--></script>
    key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw"
    type="text/javascript"></script>
  </head>
  <body onUnload="GUnload()">
 	<table border=0>
      <tr>
        <td>
<div id="map" style="width: <span class=;">550px; height: 450px"></div>
        </td>
        4444ff;">
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>

    <noscript>mce:1</noscript>
    <script type="text/javascript">

	 var side_bar_html = "";
     var gmarkers = [];

	 var baseIcon = new GIcon();
          baseIcon.iconSize=new GSize(32,32);
          baseIcon.shadowSize=new GSize(56,32);
          baseIcon.iconAnchor=new GPoint(16,32);
          baseIcon.infoWindowAnchor=new GPoint(16,0);

      var ico_jin = new GIcon(baseIcon, "icon_jin.png", null, "icon_jins.png");

	function tabmarker(point,htmls,title) {
        var marker = new GMarker(point,ico_jin);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(htmls);
        });

		gmarkers.push(marker);
        side_bar_html += '<a href="javascript:<span class=">myclick(' + (gmarkers.length-1) + ')" border="0">' + title + '<\/a></a>
';</a>
        return marker;

      }

	  function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }

    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);

	   GDownloadUrl("info.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var title = markers[i].getAttribute("title");

          var marker = tabmarker(point,html,title);
          map.addOverlay(marker);
        }
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });

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

Kira-kira hasilnya seperti ini

OK Selamat Mencoba ….😀

CMIIW….😀

Comments
  1. hendry says:

    bro kalau mau di pakaikan database gimana y?jadi kalau gampang kalau mw nambahin koordinat…saya sudah buat tapi malah g bisa di load..mohon bimbingannya..
    <?
    mysql_connect("localhost","root","");
    mysql_select_db("datagis");
    $c = mysql_query("SELECT x,y,deskripsi FROM datagis'");
    while($b = mysql_fetch_array($c)){
    echo" var point = new GLatLng($b[x],$b[y])";
    echo" var marker = createMarker(point,'Gerai PLN Lebak Bulus 1,Lt.1 Jl.Lebak Bulus Raya Pondok Pinang Village12310, Indonesia’,c1)
    map.addOverlay(marker)”;
    }
    ?>

    • kurniawandwi says:

      saya taruh d postingan berikutnya yah…

      bentar, secepatnya saya buatkan, sebenarnya sudah ada d localhost sy😀

      blom tergerak ni tangan buat nulih hehehehhe…

      sabar, sebenarnya mudah kok mas.

      kalo mas ngerti cara Ajax atau minimal Parsing XML dr PHP, tu udah cukup buat ngembangin ambil lat-lng dr database😀

      sabar yah…😀

  2. hendry says:

    wah makasih yah mas bro..:D…

  3. hendry says:

    bro gw d paste smua ni kodingan koq malah g keluar ap2 selain latihan xml doank y?ud di edit2 jg masih g muncul?:D

    • kurniawandwi says:

      pake koneksi internet kan ? heheh ekan google maps butuh koneksi inet .
      cek XML filenya emank udah ngeload sama scriptnya.

      cek lg mungkin ada error di segi client, coba pake firebug, extentionsnya Firefox, download aj gratis. ntar ketauan kok errornya apa.

  4. hendry says:

    mas memungkinkan tidak kalau menggunakan combobox untuk melihat point di google maps? jadi seperti ketika saya memilih propinsi sumatrea kemudia muncul kota medan dan ketika saya memilih medan maka akan muncul di maps itu medan.kalau memungkinkan mohon di bantu mas mengenai logika dan sedikit clue soalnya saya telah berhasli menggunakan source dari yang ada diblog ini dan saya sangat berterima kasih dengan ada nya blog ini yang sangat membantu saya hanya saja saya harus juga membuat yang bisa memilih berdasarkan daerah yang dipilih.

    Terima kasih

  5. no label says:

    kalo pake api versi 3 gimana kakak

  6. ikut nyimak pak kurnia,
    boleh juga di share yang ver. 3.0
    kalo boleh yang pake database sql pak🙂

  7. rahmat says:

    mas kurnia
    bagaimana cara menampilkan klik kanan pada peta?

  8. Ahmad Maru says:

    om kalo di gabungin sama mencari jalur terpendek bisa gag?

  9. Ronny says:

    cara melakukan pencarian berdasarkan data yang ada di database gimana yaa??

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