Membuat External Link Marker Icon dan Window Info

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 😀