Membuat External Link Marker Icon dan Window Info

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

Sekarang salah satu pengembangan yang bisa dilakukan yaitu membuat external link berfungsi untuk memanggil marker yang ada didalam peta.

berhubung ane lg males njelasin. ane copas aj yah scriptnya😀

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 ico1 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon40.png",
null, "http://maps.google.com/mapfiles/kml/pal4/icon40s.png");
      var ico2 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon41.png",
null, "http://maps.google.com/mapfiles/kml/pal4/icon41s.png");
      var ico3 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon42.png",
null, "http://maps.google.com/mapfiles/kml/pal4/icon42s.png");
      var ico4 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon43.png",
null, "http://maps.google.com/mapfiles/kml/pal4/icon43s.png");
      var ico_jin = new GIcon(baseIcon, "icon_jin.png", null, "icon_jins.png");

	function tabmarker(point,htmls,labels,icon,title) {
        var marker = new GMarker(point,icon);
        GEvent.addListener(marker, "click", function() {
          // adjust the width so that the info window is large enough for this many tabs
          if (htmls.length > 2) {
            htmls[0] = '
<div style="width: '+htmls.length*88+'px;">' + htmls[0] + '<\/div>';</div>
          }
          var tabs = [];
          for (var i=0; i
            tabs.push(new GInfoWindowTab(labels[i],htmls[i]));
          }
          marker.openInfoWindowTabsHtml(tabs);
        });

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

      }

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

	  var point = new GLatLng(-7.231699,112.368164);
      var marker = tabmarker(point, ["Informasi Tab ke-1"],["Tab satu"],ico1,"Jin Botol Link - 1")
      map.addOverlay(marker);

      var point = new GLatLng(-6.489983,107.138672);
      var marker = tabmarker(point, ["Informasi Tab ke-1", "Informasi Tab ke-2"],
["Tab satu","Tab Dua"],ico2,"Jin Botol Link - 2")
      map.addOverlay(marker);

      var point = new GLatLng(-0.747049,113.862305);
      var marker = tabmarker(point, ["Informasi Tab ke-1", "Informasi Tab ke-2","Informasi Tab ke-3"],
["Tab satu","Tab Dua","Tab Tiga"],ico3,"Jin Botol Link - 3")
      map.addOverlay(marker);

      var point = new GLatLng(-3.294082,126.870117);
      var marker = tabmarker(point, ["Informasi Tab ke-1", "Informasi Tab ke-2","Informasi Tab ke-3","Informasi Tab ke-4"],
["Tab satu","Tab Dua","Tab Tiga","Tab Empat"],ico4,"Jin Botol Link - 4")
      map.addOverlay(marker);

	  var point = new GLatLng(-1.45004,101.953125);
      var marker = tabmarker(point, ["Informasi Tab ke-1", "Informasi Tab ke-2","Informasi Tab ke-3","Informasi Tab ke-4"],
["Tab satu","Tab Dua","Tab Tiga","Tab Empat"],ico_jin,"Jin Botol Link - 5")
      map.addOverlay(marker);

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

	  document.getElementById("external_link").innerHTML = external_link_html;

    }
    else {
      alert("Sepurane rek.., Google Maps tidak bisa dibuka dengan browser ini");
    }

Hasilnya kayak gini nanti :

CMIIW…. Selamat Mencoba😀

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