//http://econym.org.uk/gmap/
   
   //<![CDATA[
  	
      if (GBrowserIsCompatible()) {
	   // this variable will collect the html which will eventualkly be placed in the side_bar
      var side_bar_html = "";
	  var side_bar_html1 = "";
	  var side_bar_html2 = "";
	  var side_bar_html3 = "";
	  var side_bar_html4 = "";
    
      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var htmls = [];
      var i = 0;
	  var loadmenu = 0;
		 }//if (GBrowserIsCompatible())
	  else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
	 
	function loadmap(map)
	{
	if(map==1){
	getdata('google-map.html?map=','switch','googlemap',2);
	document.getElementById("textgoogle").innerHTML = "<p style=\"margin:0px; color:#609b16;\">Now you still using \"Google Map\" this map is show deep in detail of all destination but you can see overall image of destination travel in phuket by click <a href=\"javascript:loadmap(2);\">PhuketReport Map</a> at left menu</p>";
	}
	else{
	getdata('phuketreport-map.html?map=','switch','mymap',2);
	document.getElementById("textgoogle").innerHTML = "<p style=\"margin:0px; color:#398ac6;\">Now you still using \"PhuketReport Map\" this map is show overall image of destination travel in phuket but you can see deep in detail of all destination by click <a href=\"javascript:loadmap(1);\">Google map</a> at left menu</p>";
	}
	
	}
	  
	   // A function to create the marker and set up the event window
      function createMarker(point,name,html,icontype,type) {
      	
		var number=parseInt(icontype) ;
	  
 		var myicon = new GIcon(G_DEFAULT_ICON);
        myicon.sprite = {image:"../images/GoogleMarker.png", top:34*number};
		
         var marker = new GMarker(point,{icon:myicon});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
		// add a line to the side_bar html
		if(type=="beach")
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')"><span style="color:#FF0000;">' + name + '</span><\/a>';
		else if(type=="island")
		side_bar_html1 += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')"><span style="color:#009900;">' + name + '</span><\/a>';
		else if(type=="waterfall")
		side_bar_html2 += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')"><span style="color:#754c24;">' + name + '</span><\/a>';
		else if(type=="show")
		side_bar_html3 += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')"><span style="color:#2e3192;">' + name + '</span><\/a>';
		else if(type=="sport")
		side_bar_html4 += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')"><span style="color:#c2b800;">' + name + '</span><\/a>';
		else if(type=="hotel")
		side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')"><h1 class="style14" style="color:#FFFFFF;">' + name + '</h1><\/a>';
		i++;
        return marker;
      }
	  
	  
	   // This function picks up the click and opens the corresponding info window
      function myclick(i) {
         gmarkers[i].openInfoWindowHtml(htmls[i]);
      }
	  
	  function getmap(){
	  
	  	if(loadmenu==1)
		side_bar_html = side_bar_html1 = side_bar_html2 = side_bar_html3 = side_bar_html4 = "";
		
        var map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(680,1602) } );
		map.setCenter(new GLatLng(7.97,98.3559), 12);
        map.addControl(new GLargeMapControl());

		var mapControl = new GMapTypeControl();
        map.addControl(mapControl);
		
		
	
       // Read the data from example3.xml
      var request = GXmlHttp.create();
      request.open("GET", "googlemap.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            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 label = markers[i].getAttribute("label");
            // create the marker
			var icontype = markers[i].getAttribute("icontype");
			var type =  markers[i].getAttribute("type");
          	var marker = createMarker(point,label,html,icontype,type);
            map.addOverlay(marker);
          }
		 
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
		  document.getElementById("side_bar1").innerHTML = side_bar_html1;
		  document.getElementById("side_bar2").innerHTML = side_bar_html2;
		  document.getElementById("side_bar3").innerHTML = side_bar_html3;
		  document.getElementById("side_bar4").innerHTML = side_bar_html4;
		  
		  loadmenu=1;
        }
      }
	 
      request.send(null);
	
     }
    
	function gethotelmap(lng1,lat1,name1){
	 
	 
		side_bar_html = "";
        var map = new GMap2(document.getElementById("map_hotel"),{ size: new GSize(674,400) } );
		map.setCenter(new GLatLng(lat1,lng1), 12);
        map.addControl(new GLargeMapControl());

		var mapControl = new GMapTypeControl();
        map.addControl(mapControl);
		
		
	
      
        // Read the data from example3.xml
      var request = GXmlHttp.create();
      request.open("GET", "../phuket-maps/googlemap.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            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 label = markers[i].getAttribute("label");
            // create the marker
			var icontype = markers[i].getAttribute("icontype");
			var type =  '';
          	var marker = createMarker(point,label,html,icontype,type);
            map.addOverlay(marker);
          }
		  
		  point = new GLatLng(lat1,lng1);
      	  html = name1;
      	  label = name1;
      	  // create the marker
			icontype = '5';
			type =  'hotel';
      	  marker = createMarker(point,label,html,icontype,type);
      	  map.addOverlay(marker);
		  // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
		
		}
	  }
        request.send(null);  
       
            
       
		 
          
	
	
     }
    //]]>