//<![CDATA[
var COLORS = [["red", "#ff0000"], ["orange", "#ff8800"], ["green","#008000"],
              ["blue", "#000080"], ["purple", "#800080"]];
var options = {};
var lineCounter_ = 0;
var shapeCounter_ = 0;
var markerCounter_ = 0;
var colorIndex_ = 0;
var featureTable_;
//new add
var map;
var centerPoint = new GLatLng(-1.1521, 119.4123);
var routePoints = Array();
var routePixels = Array();
var routeOverlay;
var normalProj = G_NORMAL_MAP.getProjection();	
var threshold = 15; //pixels for proximity

var centerJawa = new GLatLng(-6.971428, 110.425499);
var centerSuma = new GLatLng(-1.62049, 103.6019);
var centerSule = new GLatLng(-0.89779, 119.8572);
var centerKali = new GLatLng(-2.224222, 113.942307);
var centerNusa = new GLatLng(-9.390246, 122.06755);
var centerMalu = new GLatLng(0.079817, 126.894764);
var centerPapu = new GLatLng(-4.102521, 137.26271);


var posLat;
var posLon;

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

function load() {

	doLoad();
}

function doLoad() {
	if (GBrowserIsCompatible()) {
	 var clickedPixel; 
		map = new GMap2(document.getElementById("map"), {draggableCursor:"crosshair"});
		map.setCenter(centerPoint, 4);
		map.addControl(new GScaleControl());
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		
		featureTable_ = document.getElementById("featuretbody");
        select("hand_b");
//marker
     
//	GEvent.addListener(map, 'click', mapClick);
	GEvent.addListener(map, 'mousemove', getProximity2);
// === create the context menu div ===
      var contextmenu = document.createElement("div");
      contextmenu.style.visibility="hidden";
      contextmenu.style.background="#ffffff";
      contextmenu.style.border="1px solid #8888FF";

 contextmenu.innerHTML = '<a href="javascript:zoomIn()"><div class="context">&nbsp;&nbsp;Zoom in&nbsp;&nbsp;</div></a>'
                      + '<a href="javascript:zoomOut()"><div class="context">&nbsp;&nbsp;Zoom out&nbsp;&nbsp;</div></a>'
                      + '<a href="javascript:zoomInHere()"><div class="context">&nbsp;&nbsp;Zoom in here&nbsp;&nbsp;</div></a>'
                      + '<a href="javascript:zoomOutHere()"><div class="context">&nbsp;&nbsp;Zoom out here&nbsp;&nbsp;</div></a>'
                 + '<a href="javascript:centreMapHere()"><div class="context">&nbsp;&nbsp;Centre map here&nbsp;&nbsp;</div></a>'
                 + '<a href="javascript:hideMenuZoom()"><div class="context">&nbsp;&nbsp;Close Menu&nbsp;&nbsp;</div></a>';

map.getContainer().appendChild(contextmenu);
// === listen for singlerightclick ===
      GEvent.addListener(map,"singlerightclick",function(pixel,tile) {
        // store the "pixel" info in case we need it later
        // adjust the context menu location if near an egde
        // create a GControlPosition
        // apply it to the context menu, and make the context menu visible
        clickedPixel = pixel;
        var x=pixel.x;
        var y=pixel.y;
        if (x > map.getSize().width - 120) { x = map.getSize().width - 120 }
        if (y > map.getSize().height - 100) { y = map.getSize().height - 100 }
        var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));  
        pos.apply(contextmenu);
        contextmenu.style.visibility = "visible";
      });
      
// GEvent.addListener(map, "click", function() {
  //      contextmenu.style.visibility="hidden";
    //  });
 map.clearOverlays();
}
}

 // A function to create the marker and set up the event window
function createMarkerKota(point,name,html,hicon) {
       
var i = 0;
var x = 0;
var lastlinkid;
var marker = new GMarker(point,hicon);
        var linkid = "link"+i;
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
          document.getElementById(linkid).style.background="#ffff00";
          lastlinkid=linkid;
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;

        // add a line to the side_bar html
        side_bar_html += '<div id="'+linkid+'"><a href="javascript:myclick(' + i + ')">' + name + '</a><br></div>';
        i++;
        return marker;
      }
      
      function createIconChart(tye , x, y) 
		 {     
		var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:70,30&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
		baseIcon.iconSize = new GSize(70, 70);
		baseIcon.shadowSize = new GSize(37, 27);
		baseIcon.iconAnchor = new GPoint(9, 27);
		baseIcon.infoWindowAnchor = new GPoint(9, 2);
		baseIcon.infoShadowAnchor = new GPoint(18, 25);
		return baseIcon;
		}

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
       contextmenu.style.visibility="hidden";

      }
      // === functions that perform the context menu options ===
      function zoomIn() {
        // perform the requested operation
        map.zoomIn();
        // hide the context menu now that it has been used
        contextmenu.style.visibility="hidden";
      }      
      function zoomOut() {
        // perform the requested operation
        map.zoomOut();
        // hide the context menu now that it has been used
        contextmenu.style.visibility="hidden";
      }      
      function zoomInHere() {
        // perform the requested operation
        var point = map.fromContainerPixelToLatLng(clickedPixel)
        map.zoomIn(point,true);
        // hide the context menu now that it has been used
        contextmenu.style.visibility="hidden";
      }      
      function zoomOutHere() {
        // perform the requested operation
        var point = map.fromContainerPixelToLatLng(clickedPixel)
        map.setCenter(point,map.getZoom()-1); // There is no map.zoomOut() equivalent
        // hide the context menu now that it has been used
        contextmenu.style.visibility="hidden";
      }      
      function centreMapHere() {
        // perform the requested operation
        var point = map.fromContainerPixelToLatLng(clickedPixel)
        map.setCenter(point);
        // hide the context menu now that it has been used
        contextmenu.style.visibility="hidden";
      }
      
      function setCenterto(center) {
        map.panTo(center);
        map.setZoom(7);
      }
      
      function hideMenuZoom() {

        contextmenu.style.visibility="hidden";

      }



function mapClick(marker, point) {
    contextmenu.style.visibility="hidden";
	if (!marker) {
		unboundedPoint = new GLatLng(point.lat(),point.lng())
		addRoutePoint(unboundedPoint);
	}

}

function addMarkerPoint()
{

        // add the points
var point = new GLatLng(0.5311, 101.466);
 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

var marker = createMarkerKota(point,"Pekanbaru",'<img src="http://chart.apis.google.com/chart?chs=50x50&amp;chbh=80,10&amp;cht=bhg&amp;chl=Oil|Gas"alt="Production chart"/>Chart',baseIcon)
 map.addOverlay(marker);

var point = new GLatLng(-0.6980,101.6230);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Bali",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chbh=80,10&amp;cht=bhg&amp;chl=Oil|Gas"alt="Bali chart" />Chart',baseIcon)
      map.addOverlay(marker);


      var point = new GLatLng(-7.2891, 112.7343);
	 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Surabaya",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chbh=80,10&amp;cht=bhg&amp;chl=Oil|Gas"alt="Surabaya chart" />Chart',baseIcon)
      map.addOverlay(marker);


      var point = new GLatLng(-7.7972, 110.3687);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:90,10&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Yogyakarta",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chbh=80,10&amp;cht=bhg&amp;chl=Oil|Gas"alt="Yogyakarta chart" />Chart',baseIcon)
      map.addOverlay(marker);

      var point = new GLatLng(-6.9714, 110.4254);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Semarang",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Semarang chart" />Chart',baseIcon)
      map.addOverlay(marker);


      var point = new GLatLng(-6.91519, 107.6035);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Bandung",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Bandung chart" />Chart',baseIcon)
      map.addOverlay(marker);

      var point = new GLatLng(-6.18619, 106.8063);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:80,20&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Jakarta",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Production chart" />Chart',baseIcon)
      map.addOverlay(marker);

      var point = new GLatLng(-3.9739, 104.0746);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:90,10&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Lampung",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Lampung chart" />Chart',baseIcon)
      map.addOverlay(marker);


      var point = new GLatLng(-2.9910, 104.7574);
var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:10,90&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Palembang",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Palembang chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-0.9548, 100.3695);
	 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:90,10&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Padang",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Padang chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-3.5877, 101.8592);
	 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Bengkulu",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Bengkulu chart" />Chart',baseIcon)
      map.addOverlay(marker);

      var point = new GLatLng(-1.62049, 103.6019);
	 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Jambi",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Jambi chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(3.5775, 98.6606);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Medan",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Medan chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(5.5461, 95.3190);
	 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Banda Aceh",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Banda Aceh chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(0.9191, 104.4526);
	 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Tanjung-pinang",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Tanjung-pinang chart" />Chart',baseIcon)
      map.addOverlay(marker);
 
      var point = new GLatLng(-0.0225, 109.3303);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Pontianak",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Pontianak chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-3.328499, 114.589203);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Banjermasin",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Banjermasin chart" />Chart',baseIcon)
      map.addOverlay(marker);


      var point = new GLatLng(-1.2653, 116.8312);
	 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Balikpapan",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Balikpapan chart" />Chart',baseIcon)
      map.addOverlay(marker);


      var point = new GLatLng(-2.2242, 113.9423);
	var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Palangkaraya",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Palangkaraya chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-5.1521, 119.4123);
	 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Makasar",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Makasar chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-0.8977, 119.8572);
	 var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Palu",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Palu chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(0.5503, 123.0718);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Gorontalo",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Gorontalo chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(1.4884, 124.8434);
var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Manado",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Manado chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-3.70119, 128.1655);
var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Ambon",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Ambon chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-4.1025, 137.2627);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Papua",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Papua chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-10.1724, 123.5779);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Kupang",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Kupang chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-8.5889, 116.1304);
var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:60,40&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Mataram",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Mataram chart" />Chart',baseIcon)
      map.addOverlay(marker);

 
      var point = new GLatLng(-6.4121, 105.9612);
   var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:80,20&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Banten",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Banten chart" />Chart',baseIcon)
      map.addOverlay(marker);

      var point = new GLatLng(0.0798, 126.8947);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:20,80&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"Maluku Utara",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="Maluku chart" />Chart',baseIcon)
      map.addOverlay(marker);

      var point = new GLatLng(-9.3902, 122.0675);
	  var baseIcon = new GIcon();
baseIcon.image = "http://chart.apis.google.com/chart?chs=50x50&chd=t:50,50&cht=p3&chf=bg,s,efefef20|c,s,00000000&chl=Oil|Gas&ext=.PNG";
baseIcon.iconSize = new GSize(70, 70);
baseIcon.shadowSize = new GSize(37, 27);
baseIcon.iconAnchor = new GPoint(9, 27);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
      var marker = createMarkerKota(point,"NTT",'<br><img src="http://chart.apis.google.com/chart?chs=50x50&amp;chd=t:50,60&amp;cht=p3&amp;chl=Oil|Gas"alt="NTT chart" />Chart',baseIcon)
      map.addOverlay(marker);
      
      GEvent.addListener(map,"infowindowclose", function() {
        document.getElementById(lastlinkid).style.background="#ffffff";
        
      });

      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;
//marker
}

function addRoutePoint(point) {
	var zoom = map.getZoom();
	routePoints.push(point);
	var Px = normalProj.fromLatLngToPixel(point, zoom);
	routePixels.push(Px);

	if (routePoints.length > 1)	{
		plotRoute();
	}
	else {
		startMarker = createMarker(point,'Start')
		map.addOverlay(startMarker);
	}
}

function plotRoute() {
	map.removeOverlay(routeOverlay);
	routeOverlay = new GPolyline(routePoints,'#FF9601',3,1);
	map.addOverlay(routeOverlay);
}


function createMarker(point, title) {
	var marker = new GMarker(point,{title:title});
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(title + '<hr>Lat: ' + point.y + '<br>Lon: ' + point.x);
	});
	return marker;
}


function resetRoute() {
	routePoints = new Array();
	routePixels = new Array();
	map.clearOverlays();
	var oStatusDiv = document.getElementById("statusDiv")	
	oStatusDiv.innerHTML = '';
}


function getProximity(mouseLatLng) {
	var zoom = map.getZoom();
	var oStatusDiv = document.getElementById("statusDiv")	
	oStatusDiv.innerHTML = 'Lat Lng: ' + mouseLatLng.y.toFixed(6) + ', ' + mouseLatLng.x.toFixed(6) ;

	var mousePx = normalProj.fromLatLngToPixel(mouseLatLng, zoom);
//	oStatusDiv.innerHTML += '<br>Mouse Px: ' + mousePx.x + ', ' + mousePx.y;

	var minDist = threshold;
         var posLat =  mouseLatLng.y.toFixed(6);
         var posLon = mouseLatLng.x.toFixed(6);

	if (routePixels.length > 1){
		for (var n = 1 ; n < routePixels.length ; n++ ) {
			var a = (routePixels[n].y - routePixels[n-1].y) / (routePixels[n].x - routePixels[n-1].x);
			var b = routePixels[n].y - a * routePixels[n].x;
			var dist = Math.abs(a*mousePx.x + b - mousePx.y) / Math.sqrt(a*a+1);
///oStatusDiv.innerHTML += '<br>Mouse LatLng: ' + posLat + ', ' + posLon+' Distance  '+ dist.toFixed(2) ; 
			minDist = Math.min(minDist,dist);
		}

		if (minDist < threshold) {
			map.openInfoWindowHtml(mouseLatLng,'Proximity Alert<br>Mouse distance to line: ' + minDist.toFixed(2));

		}
		else {
			map.closeInfoWindow();
		}
	}
}






function getProximity2(mouseLatLng) {
	var zoom = map.getZoom();
	var oStatusDiv = document.getElementById("statusDiv");
	oStatusDiv.innerHTML = 'Lat Lng: ' + mouseLatLng.y.toFixed(6) + ', ' + mouseLatLng.x.toFixed(6) ;

	var mousePx = normalProj.fromLatLngToPixel(mouseLatLng, zoom);
//	oStatusDiv.innerHTML += '<br>Mouse Px: ' + mousePx.x + ', ' + mousePx.y;

	var minDist = threshold;
         var posLat =  mouseLatLng.y.toFixed(6);
         var posLon = mouseLatLng.x.toFixed(6);

	if (routePixels.length > 1){
		for (var n = 1 ; n < routePixels.length ; n++ ) {
//////////////////
			if (routePixels[n].x != routePixels[n-1].x) {
				var a = (routePixels[n].y - routePixels[n-1].y) / (routePixels[n].x - routePixels[n-1].x);
				var b = routePixels[n].y - a * routePixels[n].x;
				var dist = Math.abs(a*mousePx.x + b - mousePx.y) / Math.sqrt(a*a+1);

			}
			else {
				var dist = Math.abs(mousePx.x - routePixels[n].x)
			};

			// length^2 of line segment 
			var rl2 = Math.pow(routePixels[n].y - routePixels[n-1].y,2) + Math.pow(routePixels[n].x - routePixels[n-1].x,2);
			
			// distance^2 of pt to end line segment
			var ln2 = Math.pow(routePixels[n].y - mousePx.y,2) + Math.pow(routePixels[n].x - mousePx.x,2);

			// distance^2 of pt to begin line segment
			var lnm12 = Math.pow(routePixels[n-1].y - mousePx.y,2) + Math.pow(routePixels[n-1].x - mousePx.x,2);

			// minimum distance^2 of pt to infinite line
			var dist2 = Math.pow(dist,2);

			// calculated length^2 of line segment
			var calcrl2 = ln2 - dist2 + lnm12 - dist2;

			// redefine minimum distance to line segment (not infinite line) if necessary
			if (calcrl2 > rl2) {
				dist = Math.sqrt( Math.min(ln2,lnm12) ); 
			};  

//////////////////
//oStatusDiv.innerHTML = '<br>Mouse LatLng: ' + posLat + ', ' + posLon+' Distance  '+ dist.toFixed(2) ; 


			minDist = Math.min(minDist,dist);
		}
		


		if (minDist < threshold) {
			map.openInfoWindowHtml(mouseLatLng,'Proximity Alert<br>Mouse distance to line: ' + minDist.toFixed(2));
		}
		else {
			map.closeInfoWindow();
		}
	}

}

//add me may
function select(buttonId) {
  document.getElementById("hand_b").className="unselected";
  document.getElementById("shape_b").className="unselected";
  document.getElementById("line_b").className="unselected";
  document.getElementById("placemark_b").className="unselected";
  document.getElementById(buttonId).className="selected";
}

function stopEditing() {
  select("hand_b");
}

function getColor(named) {
  return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
}

function getIcon(color) {
  var icon = new GIcon();
  icon.image = "http://google.com/mapfiles/ms/micons/" + color + ".png";
  icon.iconSize = new GSize(32, 32);
  icon.iconAnchor = new GPoint(15, 32);
  return icon;
}

function startShape() {
  select("shape_b");
  var color = getColor(false);
  var polygon = new GPolygon([], color, 2, 0.7, color, 0.2);
  startDrawing(polygon, "Shape " + (++shapeCounter_), function() {
    var cell = this;
    var area = polygon.getArea();
    cell.innerHTML = (Math.round(area / 10000) / 100) + "km<sup>2</sup>";
  }, color);
}

function startLine() {
  select("line_b");
  var color = getColor(false);
  var line = new GPolyline([], color);
  startDrawing(line, "Line " + (++lineCounter_), function() {
    var cell = this;
    var len = line.getLength();
    cell.innerHTML = (Math.round(len / 10) / 100) + "km";
  }, color);
}

function addFeatureEntry(name, color) {
  currentRow_ = document.createElement("tr");
  var colorCell = document.createElement("td");
  currentRow_.appendChild(colorCell);
  colorCell.style.backgroundColor = color;
  colorCell.style.width = "1em";
  var nameCell = document.createElement("td");
  currentRow_.appendChild(nameCell);
  nameCell.innerHTML = name;
  var descriptionCell = document.createElement("td");
  currentRow_.appendChild(descriptionCell);
  featureTable_.appendChild(currentRow_);
  return {desc: descriptionCell, color: colorCell};
}

function startDrawing(poly, name, onUpdate, color) {
  map.addOverlay(poly);
  poly.enableDrawing(options);
  poly.enableEditing({onEvent: "mouseover"});
  poly.disableEditing({onEvent: "mouseout"});
  GEvent.addListener(poly, "endline", function() {
    select("hand_b");
    var cells = addFeatureEntry(name, color);
    GEvent.bind(poly, "lineupdated", cells.desc, onUpdate);
    GEvent.addListener(poly, "click", function(latlng, index) {
      if (typeof index == "number") {
        poly.deleteVertex(index);
      } else {
        var newColor = getColor(false);
        cells.color.style.backgroundColor = newColor
        poly.setStrokeStyle({color: newColor, weight: 4});
      }
    });
  });
}

function placeMarker() {
  select("placemark_b");
  var listener = GEvent.addListener(map, "click", function(overlay, latlng) {
    if (latlng) {
      select("hand_b");
      GEvent.removeListener(listener);
      var color = getColor(true);
      var marker = new GMarker(latlng, {icon: getIcon(color), draggable: true});
      map.addOverlay(marker);
      var cells = addFeatureEntry("Placemark " + (++markerCounter_), color);
      updateMarker(marker, cells);
      GEvent.addListener(marker, "dragend", function() {
        updateMarker(marker, cells);
      });
      GEvent.addListener(marker, "click", function() {
        updateMarker(marker, cells, true);
      });
    }
  });
}

function updateMarker(marker, cells, opt_changeColor) {
  if (opt_changeColor) {
    var color = getColor(true);
    marker.setImage(getIcon(color).image);
    cells.color.style.backgroundColor = color;
  }
  var latlng = marker.getPoint();
  cells.desc.innerHTML = "(" + Math.round(latlng.y * 100) / 100 + ", " +
  Math.round(latlng.x * 100) / 100 + ")";
}

function callHelp()
{
alert("To draw on the map, click on one of the buttons and then click on the map.  Double-click to stop drawing a line or shape. Click on an element to change color. To edit a line or shape, mouse over it and drag the points.  Click on a point to delete it. Right Click to Zooom Menu");
}

function callAbout()
{
alert("Javageo GIS Version 1.0");
}

//add me mei
 //]]>