// JavaScript Document
 var map;
 var infowindow;
var ResponseDetail;
var ib;
var boxText;
var PlaceCategory;
      function initialize() {
		  document.getElementById("gmap").style.display = 'block';
		  document.getElementById("attractionlink").style.display = 'block';
		   document.getElementById("googlemap").style.display = 'block';
		   document.getElementById("newcenter").style.display = 'none';
		 // var CenterPage=document.getElementById("newcenter");CenterPage.innerHTML=' ';
        var myOptions = {
          zoom: 5,
          center: new google.maps.LatLng(21.504394,82.717670),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
       // map = new google.maps.Map(document.getElementById('newcenter'), myOptions);
	    map = new google.maps.Map(document.getElementById('googlemap'), myOptions);
	  /*
	  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });	  
	  infowindow = new google.maps.InfoWindow(
        { 
          size: new google.maps.Size(30,30)
        });*/
	  
	  //for info box
	   google.maps.event.addListener(map, 'click', function() {
        ib.close();
        });	  
	   	  
	  boxText = document.createElement("div");
		boxText.style.cssText = "margin-top: 12px; background: white; padding: 5px;";
		//boxText.style.cssText ="width:280px; height:250px; z-index:0; overflow: auto; background-color: #FFFFFF; layer-background-color: #F4E4E1; border: 1px solid black;"
		boxText.innerHTML = "";

		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(-140, 0)
			,zIndex: null
			,boxStyle: { 
			 // background: "url('/image/Home/CenterPanel/tipbox.gif') no-repeat"
			  background: "white"
			  //,opacity: 0.75
			  ,width: "280px"
			  ,height: "200px"
			  ,overflow: "auto"
			  ,border: "1px solid black"
			 }
			,closeBoxMargin: "10px 2px 2px 2px"
			,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
			,infoBoxClearance: new google.maps.Size(1, 1)
			,isHidden: false
			,pane: "floatPane"
			,enableEventPropagation: false
		};
/*
		google.maps.event.addListener(marker, "click", function (e) {
			ib.open(theMap, this);
		});*/

		ib = new InfoBox(myOptions);
		GetTouristPlace('TP');
		//End of info box
 }//End of initialize

function ShowTouristPlaces(){
var image = '/image/Home/CenterPanel/HistoricalPlaceIcon.gif';
	 
  var myLatLng = new google.maps.LatLng(15.408333, 73.791664);
  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  }); 
}

var beaches= new Array();
var markersArray = [];
function ShowMultiple(){
	var darwin = new google.maps.LatLng(21.504394,82.717670);
    map.setCenter(darwin);
	map.setZoom(5);
	  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  if(PlaceCategory =='TP'){
  var image = new google.maps.MarkerImage('/image/Home/CenterPanel/TouristPlaceIcon.gif',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(15, 12),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 12));
  var shadow = new google.maps.MarkerImage('/image/Home/CenterPanel/TouristPlaceIcon.gif',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(15, 12),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 12));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  }
   if(PlaceCategory =='HP'){
  var image = new google.maps.MarkerImage('/image/Home/CenterPanel/HistoricalPlaceIcon.gif', new google.maps.Size(15, 12), new google.maps.Point(0,0), new google.maps.Point(0, 12));
  var shadow = new google.maps.MarkerImage('/image/Home/CenterPanel/HistoricalPlaceIcon.gif', new google.maps.Size(15, 12), new google.maps.Point(0,0), new google.maps.Point(0, 12));
  }
  if(PlaceCategory =='WW'){
  var image = new google.maps.MarkerImage('/image/Home/CenterPanel/WaterWorldIcon.gif', new google.maps.Size(15, 12), new google.maps.Point(0,0), new google.maps.Point(0, 12));
  var shadow = new google.maps.MarkerImage('/image/Home/CenterPanel/WaterWorldIcon.gif', new google.maps.Size(15, 12), new google.maps.Point(0,0), new google.maps.Point(0, 12));
  }
  if(PlaceCategory =='AK'){
  var image = new google.maps.MarkerImage('/image/Home/CenterPanel/AnimalKingdomIcon.gif', new google.maps.Size(15, 12), new google.maps.Point(0,0), new google.maps.Point(0, 12));
  var shadow = new google.maps.MarkerImage('/image/Home/CenterPanel/AnimalKingdomIcon.gif', new google.maps.Size(15, 12), new google.maps.Point(0,0), new google.maps.Point(0, 12));
  }
  if(PlaceCategory =='NnD'){
  var image = new google.maps.MarkerImage('/image/Home/CenterPanel/NatureAndAdventureIcon.gif', new google.maps.Size(15, 12), new google.maps.Point(0,0), new google.maps.Point(0, 12));
  var shadow = new google.maps.MarkerImage('/image/Home/CenterPanel/NatureAndAdventureIcon.gif', new google.maps.Size(15, 12), new google.maps.Point(0,0), new google.maps.Point(0, 12));
  }
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
	 MapEventClick(marker, i,beach[0], 'TP');
	 markersArray.push(marker);
  }
}
var GlobalMarker;
function MapEventClick(marker, number, name, cat) {
	
   google.maps.event.addListener(marker, 'click', function() {
	GlobalMarker = marker;
	TouristDetail(name,PlaceCategory);
	
	
  });
}
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

<!-- Get Tourist Place ---- -->
var touristRequest;
var mBrowserType='windows';
var mWindow="windows";

function GetTouristPlace(pcat){
	ib.close();
	beaches = [];
	PlaceCategory = pcat;
	PlaceCategory = PlaceCategory.trim();PlaceCategory = PlaceCategory.ltrim();PlaceCategory = PlaceCategory.rtrim();
	clearOverlays();
	var urlStr='/servlet/GetTouristPlace?Category='+PlaceCategory+'&dummy='+Math.random();;
	if(window.ActiveXObject)
	   {
		   touristRequest=new ActiveXObject('Microsoft.XMLHttp');
	   }
	   else
	   {
		   if(window.XMLHttpRequest)
		   {
			   touristRequest=new XMLHttpRequest();mBrowserType='nonWindows';
			}
		}
     if(touristRequest)
	 {
		 touristRequest.onreadystatechange=getPlaces;
		 touristRequest.open('get',urlStr);
		 try{
			 if(window.ActiveXObject){touristRequest.send();
			 }
              else
			  {
				  var param='';touristRequest.send(param);mBrowserType='nonWindows';
			   }
			   }
	     catch(ajaxEx){}}}
function getPlaces()
{
  if(touristRequest.readyState==4){
	 if(touristRequest.status==200){
		 
		 var dataFilter=touristRequest.responseText.split(",");
		 var data=dataFilter.join("");
		 var MyArray=data.split("^");
		 var DestId=MyArray[0];
		 var DestName=MyArray[1];
		 var Lat=MyArray[2];
		 var Long=MyArray[3];
		 var did=DestId.split(" ");var dname=DestName.split("~");var dlat=Lat.split("~");var dlong=Long.split("~");
		
		 for(var i=0;i<did.length;i++)
		 {
			 beaches.push([dname[i],dlat[i],dlong[i],i]);
		 }
		
			ShowMultiple();
	 }
 }
}
var touristDetailRequest;
function TouristDetail(name,pcat){
	ib.close();
	//ResponseDetail = "";
	var urlStr='/servlet/TouristPlaceDetail?DestName='+name+'&Category='+pcat+'&dummy='+Math.random();
	
	if(window.ActiveXObject)
	   {
		   touristDetailRequest=new ActiveXObject('Microsoft.XMLHttp');
	   }
	   else
	   {
		   if(window.XMLHttpRequest)
		   {
			   touristDetailRequest=new XMLHttpRequest();mBrowserType='nonWindows';
			}
		}
     if(touristDetailRequest)
	 {
		 touristDetailRequest.onreadystatechange=getPlacesDetail;
		 touristDetailRequest.open('get',urlStr);
		 try{
			 if(window.ActiveXObject){touristDetailRequest.send();
			 }
              else
			  {
				  var param='';touristDetailRequest.send(param);mBrowserType='nonWindows';
			   }
			   }
	     catch(ajaxEx){}}}
function getPlacesDetail()
{
  if(touristDetailRequest.readyState==4){
	 if(touristDetailRequest.status==200){
		 var dataFilter=touristDetailRequest.responseText.split(",");
		 var data=dataFilter.join("");
		 var MyArray=data.split("^");
		 
		 var Pdetail = MyArray[0];
		 var DestinationName = MyArray[1];
		 var StateName = MyArray[2];
		
		 
		ResponseDetail='<tr><td align="right"><a href="/TravelManager/HowToReach.jsp?StateName='+StateName+'&DestinationName='+DestinationName+'" onclick="window.open(this.href); return false;" class="HTRHome">How To Reach</a></td></tr><br>';
		 ResponseDetail+='<tr><td align="left"><a href="/travel/tourism/'+StateName+'/destination/'+DestinationName+'/'+StateName+'Tour.htm" onclick="window.open(this.href); return false;" class="HTRHome1">About '+DestinationName+'</a></td></tr><br>';
		 ResponseDetail+='<tr><td>';
		 ResponseDetail+=Pdetail;
		 ResponseDetail+='<br>';
		 //ResponseDetail+='</td></tr>';
		 ResponseDetail+='<tr><td align="left"><a href="/travel/tourism/'+StateName+'/destination/null/'+StateName+'Tour.htm" onclick="window.open(this.href); return false;" class="HTRHome1">Go To '+StateName+'</a></td></tr><br>';
		 ResponseDetail+='<tr><td align="right"><a href="/TravelManager/HowToReach.jsp?StateName='+StateName+'&DestinationName='+DestinationName+'" onclick="window.open(this.href); return false;" class="HTRHome">How To Reach</a></td></tr><br>';
		
	//this code append for adding InfoBox or Styling InfoWindow.
	boxText.innerHTML = ResponseDetail;
	ib.open(map, GlobalMarker);
	 }
 }
}
function BackHomePage()
{
	document.getElementById("gmap").style.display = 'none';
	document.getElementById("attractionlink").style.display = 'none';
		   document.getElementById("googlemap").style.display = 'none';
		   document.getElementById("newcenter").style.display = 'block';
}
<!-- Get Tourist Place ---- -->
String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"");}
String.prototype.ltrim=function(){return this.replace(/^\s+/,"");}
String.prototype.rtrim=function(){return this.replace(/\s+$/,"");}