/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
var markers=[];
var flag=0;
var flag_init=0;
var map=null;
var  panorama =null;
var service =null;
var toggle =false;
var tempmarker=null;

function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -240;
  this.offsetHorizontal_ = -50;
  this.height_ = 165;
  this.width_ = 266;
  this.card_name=unescape(opts.card_name);
  this.image_path=opts.image_path;
  this.user_name=unescape(opts.user_name);
  this.user_id=opts.user_id;
  this.role_id=opts.role_id;
  this.card_pr_id=opts.card_pr_id;
  this.street_pin_view=true;
  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
		return me.panMap.apply(me);
    });
	
  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}


function initialize() {
	
	var myOptions=null;
	service = new google.maps.StreetViewService();
	try{
	if(itemData.length != 0){
    myOptions = {
		  zoom: zoomleveldefault,
		  zoomControl: true,
		  zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL, //DEFAULT OR LARGE OR SMALL
			position: google.maps.ControlPosition.TOP_LEFT
		  },
		  mapTypeControl: false,
	
		  center: new google.maps.LatLng(itemData[0]['lat'],itemData[0]['lng']),
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  mapTypeControl: false,
		  sensor: 'true',
		  maxZoom:zoommax,
		  minZoom:2

		}
	}else{
		myOptions = {
		  zoom: zoomleveldefault,
		  zoomControl: true,
		  zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL, //DEFAULT OR LARGE OR SMALL
			position: google.maps.ControlPosition.TOP_LEFT
		  },
		  mapTypeControl: false,
		  center: new google.maps.LatLng(defaultLat,defaultLng),
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  mapTypeControl: false,
		  sensor: 'true',
		  maxZoom:zoommax,
		  minZoom:2
		}
	}
	
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);	
	panorama = map.getStreetView();
	}catch(err)
	{
			alert('There is problem in loading map, Please refresh it again in order to work properly.');
	}
		
	for(i=0;i<itemData.length;i++){
	 var image = new google.maps.MarkerImage(BASE_URL+"images/pin.png",
          new google.maps.Size(43, 46),
           new google.maps.Point(0,0),
           new google.maps.Point(0, 32));
	   
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(itemData[i]['lat'], itemData[i]['lng']),
			map: map,
			icon:image,
			draggable:true,
			animation: google.maps.Animation.DROP,
			card_name:itemData[i]['name'],
			image_path:itemData[i]['image_path'],
			user_name:itemData[i]['user_name'],
			user_id:itemData[i]['user_id'],
			role_id:itemData[i]['role_id'],
			card_pr_id:itemData[i]['card_pr_id']
		});
		markers[i]=marker;		
			
		google.maps.event.addListener(marker, "click", function(e) {
		 removeInfoBox();
			 if(this.card_name != ''){
				var infoBox = new InfoBox({latlng: this.getPosition(), map: map,card_name:this.card_name,image_path:this.image_path,user_name:this.user_name,user_id:this.user_id,card_pr_id:this.card_pr_id});
					//infoBox.setMap( panorama); 					
									
			 }
			 else{
				 var infoBox = new InfoBox({latlng: this.getPosition(), map: map,card_name:this.card_name,image_path:this.image_path,user_name:this.user_name,user_id:this.user_id,role_id:this.role_id});
			 }
		});	
		
			
	}
	
	google.maps.event.addListener(map, "click", function(e) {
		 //removeInfoBox();
	});
	
	
	
	var latlngbounds = new google.maps.LatLngBounds( );	
	for(i=0;i<itemData.length;i++)
	{		
		latlngbounds.extend(new google.maps.LatLng(itemData[i]['lat'], itemData[i]['lng']));		
		google.maps.event.addListener(map, 'idle', function() {
        zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (map.getZoom() < 2) // Change max/min zoom here
                map.setZoom(2);
				google.maps.event.removeListener(zoomChangeBoundsListener);
			});
		});	
	}
		var def = null;			
		var t = null;
		
		google.maps.event.addListener(map, 'bounds_changed', function() {			
			clearTimeout(t);
			t=setTimeout("getData()",2500);
		});
	if(viewtype == 'street'){

		if(itemData.length > 0){
		
		show_street(itemData[0]['lat'], itemData[0]['lng'],itemData[0]['card_pr_id'],addslashes(itemData[0]['name']),addslashes(itemData[0]['user_name']),itemData[0]['image_path']); 
		}
	}else{
	clearTimeout(def);
	def=setTimeout("getdefault()",2500);
	}	
		
  }

  function show_street(lat,lng,card_pr_id,card_name,user_name,image_path){
         card_name = stripslashes(card_name);
        user_name = stripslashes(user_name);
	var infoBox =null;
	var panoramaOptions =null;
	service = new google.maps.StreetViewService();	
	service.getPanoramaByLocation(new google.maps.LatLng(lat,lng), 100, function(data, status){	
	if (status == google.maps.StreetViewStatus.OK) {
	if(tempmarker != null)
	{
		tempmarker.setMap(null);
	}
	var image = new google.maps.MarkerImage(BASE_URL+"images/pin.png",
				  new google.maps.Size(43, 46),
				   new google.maps.Point(0,0),
				   new google.maps.Point(0, 32));
	 tempmarker = new google.maps.Marker({
			position:data.location.latLng,
			map: map,
			icon:image,
			draggable:false,
			card_name:card_name,
			image_path:image_path,
			user_name:user_name,
			user_id:'',
			role_id:1,
			card_pr_id:card_pr_id
		});
	panoramaOptions = { position: data.location.latLng, pov: { heading: 20,pitch: -10,zoom: 0 },enableCloseButton: true};
	panorama=null;
	panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
	google.maps.event.addListener(tempmarker, "click", function(e) {
		 infoBox = new InfoBox({latlng: data.location.latLng, map: map,card_name:card_name,image_path:image_path,user_name:user_name,card_pr_id:card_pr_id});	 
	 	 infoBox.setMap( panorama); 		
		
	  });		
	  infoBox = new InfoBox({latlng: data.location.latLng, map: map,card_name:card_name,image_path:image_path,user_name:user_name,card_pr_id:card_pr_id});	 
	  map.setStreetView(panorama);	
	  infoBox.setMap( panorama); 	
	  tempmarker.setMap(panorama);
	  $('#mapgallery').css('z-index',1000);	
	}});
  }
  function getdefault(){
		if(markers.length > 0){	   
			google.maps.event.trigger(markers[0], "click");
		}
	}

	function getData(){
		if(flag==1){
			removeInfoBox();
			var zoomLevel = map.getZoom();
			var center = map.getCenter();				
			var ns = map.getBounds();
			var northeast = ns.getNorthEast();
			var southwest = ns.getSouthWest();			
			var northeast_lat = northeast.lat();
			var northeast_lng = northeast.lng();
			var southwest_lat = southwest.lat();
			var southwest_lng = southwest.lng();			
			var center_lat = center.lat();
			var center_lng = center.lng();
			var url=BASE_URL+"ajax_update/map/";
			var dataString = 'northeast_lat=' + northeast_lat + '&northeast_lng=' + northeast_lng + '&southwest_lat=' + southwest_lat + '&southwest_lng=' + southwest_lng + '&center_lat=' + center_lat + '&center_lng=' + center_lng;
			$.post(url, {northeast_lat:northeast_lat,northeast_lng:northeast_lng,southwest_lat:southwest_lat,southwest_lng:southwest_lng,tab_type:TAB_TYPE,main_map:MAIN_MAP,user_id:USER_ID,location:LOCATION,search:SEARCH}, function(json){	
				if(json.records.map_points != false){	
					render_map(json.records.map_points,json.records.recent_cards);
				}
				else{
					render_map('',json.records.recent_cards);
				}			   
			},'json');
				
		}else{
			flag=1;
		}
	}
	
	function render_map(map_points,recent_cards){
		for(i=0;i<markers.length;i++){
			markers[i].setMap(null);			
		}
		
		itemData=eval( "[" + map_points + "]" );		
		if(itemData.length != 0){
			if( itemData[0]['card_pr_id'] !='' && itemData[0]['card_pr_id'] != undefined ){
				default_id = 'imag'+itemData[0]['card_pr_id'];				
			}
			else if(itemData[0]['user_id'] !=''){
				default_id = 'imag'+itemData[0]['user_id'];
			}
		}
		
			
		for(i=0;i<itemData.length;i++){
			 var image = new google.maps.MarkerImage(BASE_URL+"images/pin.png",
				  new google.maps.Size(43, 46),
				   new google.maps.Point(0,0),
				   new google.maps.Point(0, 32));
			   
				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(itemData[i]['lat'], itemData[i]['lng']),
					map: map,
					icon:image,
					draggable:true,
					//animation: google.maps.Animation.DROP,
					card_name:itemData[i]['name'],
					image_path:itemData[i]['image_path'],
					user_name:itemData[i]['user_name'],
					user_id:itemData[i]['user_id'],
					role_id:itemData[i]['role_id'],
					card_pr_id:itemData[i]['card_pr_id']
				});
				markers[i]=marker;
				google.maps.event.addListener(marker, "click", function(e) {
				 removeInfoBox();
					 if(this.card_name != ''){
						 var infoBox = new InfoBox({latlng: this.getPosition(), map: map,card_name:this.card_name,image_path:this.image_path,user_name:this.user_name,user_id:this.user_id,card_pr_id:this.card_pr_id});
						
					 }
					 else{
						 var infoBox = new InfoBox({latlng: this.getPosition(), map: map,card_name:this.card_name,image_path:this.image_path,user_name:this.user_name,user_id:this.user_id,role_id:this.role_id});
					 }
				});
				
			}		
			
					
			$('.mapgallery').html(recent_cards);
			jQuery('#mycarousel').jcarousel({
				vertical: true,
				scroll: 2
			});
			 $('.btn-slide').click(function(){
			if($(this).hasClass('active')){
				$('.btn-slide').removeClass("active").addClass("unactive");	
				$('.slide_matter').animate({width: '150'}, 500, function() {$('.panel').css({display : 'block'})});
				$('.panel').animate({width: '150'}, 500, function() {});
			}else{
				$('.btn-slide').addClass("active").removeClass("unactive");	
				$('.panel').css({display : 'none'});
				$('.slide_matter').animate({width: '1'}, 500, function() {});
				$('.panel').animate({width: '0'}, 500, function() {});
			}
		  });			 
			flag=0;			
		
	}

  
var perpeopleid='';
function show(lat,lng,name,image_path,user_name,user_id,role_id,image_id){
		  
		$('#'+image_id).addClass('selected_img');
		$('#'+default_id).removeClass('selected_img');
		default_id = image_id;
		if((perpeopleid == image_id) && (perpeopleid != '') ){
			window.location=BASE_URL+'people_flow/'+user_id;

		}else{
		  perpeopleid=image_id;	
		  removeInfoBox();
		  var infoBox = new InfoBox({latlng: new google.maps.LatLng(lat,lng), map: map,card_name:name,image_path:image_path,user_name:user_name,user_id:user_id,role_id:role_id});
		}
		
}  
var perid='';
function show_lils(lat,lng,name,card_pr_id,image_path,user_name,image_id,flag){

	user_name=stripslashes(user_name);
	$('#'+image_id).addClass('selected_img');
	$('#'+default_id).removeClass('selected_img');
	var infoBox=null;
	default_id = image_id;

	if((perid == image_id) && (perid != '') ){
		window.location=BASE_URL+'card_detail/'+card_pr_id;
	}else{
		perid=image_id;	
		removeInfoBox();
	
	var service = new google.maps.StreetViewService();
	service.getPanoramaByLocation(new google.maps.LatLng(lat,lng), 100, function(result, status) 
	{

	var show=false;
        var streehtml='';
    	if (status == google.maps.StreetViewStatus.OK) {
			
	if(tempmarker != null)
	{
		tempmarker.setMap(null);
	}
	var image = new google.maps.MarkerImage(BASE_URL+"images/pin.png",
				  new google.maps.Size(43, 46),
				   new google.maps.Point(0,0),
				   new google.maps.Point(0, 32));
	 tempmarker = new google.maps.Marker({
			position: result.location.latLng,
			map: map,
			icon:image,
			draggable:false,
			card_name:name,
			image_path:image_path,
			user_name:user_name,
			user_id:'',
			role_id:1,
			card_pr_id:card_pr_id
		});
	google.maps.event.addListener(tempmarker, "click", function(e) {
		infoBox.setMap(null);
		 infoBox = new InfoBox({latlng: result.location.latLng, map: map,card_name:name,image_path:image_path,user_name:user_name,card_pr_id:card_pr_id});	 
	 	  infoBox.setMap( panorama); 
	  });

		infoBox = new InfoBox({latlng: result.location.latLng, map: map,card_name:name,image_path:image_path,user_name:user_name,card_pr_id:card_pr_id});
		toggle = panorama.getVisible();	
			//alert(panorama.getVisible())		;
		
		if (toggle == true) {
		var objlat=new google.maps.LatLng(lat,lng);
		var panoramaOptions = { position: result.location.latLng, pov: { heading:20,pitch: -10,zoom: 0 },enableCloseButton: true};
		panorama.setVisible(false);
		panorama=null;
		panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);	 
		  map.setStreetView(panorama);
		  infoBox.setMap( panorama); 		
 		 tempmarker.setMap(panorama);	 
		
		 }
		 $('#mapgallery').css('z-index',1000);
			
	}else{

	if(tempmarker != null)
	{
		tempmarker.setMap(null);
	}
	var image = new google.maps.MarkerImage(BASE_URL+"images/pin.png",
				  new google.maps.Size(43, 46),
				   new google.maps.Point(0,0),
				   new google.maps.Point(0, 32));
	 tempmarker = new google.maps.Marker({
			position: google.maps.LatLng(lat,lng),
			map: map,
			icon:image,
			draggable:false,
			card_name:name,
			image_path:image_path,
			user_name:user_name,
			user_id:'',
			role_id:1,
			card_pr_id:card_pr_id
		});
	google.maps.event.addListener(tempmarker, "click", function(e) {
		infoBox.setMap(null);
		 infoBox = new InfoBox({latlng: new google.maps.LatLng(lat,lng), map: map,card_name:name,image_path:image_path,user_name:user_name,card_pr_id:card_pr_id});	 
	 	  infoBox.setMap( panorama); 
	  });


	infoBox = new InfoBox({latlng: new google.maps.LatLng(lat,lng), map: map,card_name:name,image_path:image_path,user_name:user_name,card_pr_id:card_pr_id});
	 $('#mapgallery').css('z-index',1000);
	 tempmarker.setMap(panorama);
	}
	});

	}
		
} 
/* InfoBox extends GOverlay class from the Google Maps API
 */
InfoBox.prototype = new google.maps.OverlayView();

/* Creates the DIV representing this InfoBox
 */
InfoBox.prototype.remove = function() {
//alert(typeof this.div_);
 /* if ((this.div_ != null) || (this.div_ != undefined)) {    	
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }*/
if(($('#mapbox') != null) || ($('#mapbox') != undefined)){	
	try{	
		
	     $('#mapbox').empty().remove();
	}catch(err)
	{
	}

    }
};

/* Redraw the Bar based on the current projection and zoom level
 */
InfoBox.prototype.draw = function() {
  // Creates the element if it doesn't exist already.
  this.createElement();
  if (!this.div_) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our Bar
		
  var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (!pixPosition) return;

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
  this.div_.style.height = this.height_ + "px";
  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
  this.div_.style.display = 'block';
};

/* Creates the DIV representing this InfoBox in the floatPane.  If the panes
 * object, retrieved by calling getPanes, is null, remove the element from the
 * DOM.  If the div exists, but its parent is not the floatPane, move the div
 * to the new pane.
 * Called from within draw.  Alternatively, this can be called specifically on
 * a panes_changed event.
 */
function removeInfoBox()	
{	
	    if(($('#mapbox') != null) || ($('#mapbox') != undefined)){	
		try{	
		  $('#mapbox').empty().remove();
		}catch(err)
		{
		}
	    }
}
function showmap(){
panorama.setVisible(false);

}
InfoBox.prototype.createElement = function() {
  var panes = this.getPanes();
  var div = this.div_;
 
  if (!div) {
    // This does not handle changing panes.  You can set the map to be null and
    // then reset the map to move the div.
    div = this.div_ = document.createElement("div");  
    div.className="mapbox";
    div.id="mapbox";
    
    var html='';
    var obj=this;
   service = new google.maps.StreetViewService();
	service.getPanoramaByLocation(this.latlng_, 100, function(result, status) 
	{
	var show=false;
        var streehtml='';
    	if (status == google.maps.StreetViewStatus.OK) {
			
		show =true;
		
	}
	
	if(panorama.getVisible()){		
		this.street_pin_view=false;
	}else{
		this.street_pin_view=true;
	}

	var fun='';
        var cardname=new String(obj.card_name);
	
        var image_path=encodeURI(obj.image_path);
        var facebook=" onclick= \"facebook('"+BASE_URL+"card_detail/"+obj.card_pr_id+"','"+addslashes(cardname)+"',440,620,'"+BASE_URL+image_path+"'); return false;\"";
	 var twitter=" onclick= \"twitter('"+BASE_URL+"card_detail/"+obj.card_pr_id+"','"+addslashes(cardname)+"',440,620,'"+BASE_URL+image_path+"'); return false;\""; 
		
	     if(show == true){
			if(this.street_pin_view){
				fun = 'onclick ="show_street('+result.location.latLng.lat()+','+result.location.latLng.lng()+','+obj.card_pr_id+',\''+addslashes(cardname)+'\',\''+obj.user_name+'\',\''+obj.image_path+'\'); return false;"';

				streehtml = '<a title="Show on street view" href="javascript:void(0)" '+fun+' > <img style="border:none;" src="'+BASE_URL+'images/street_icon.png" > </a>';
				
			}else{
				fun = 'onclick ="showmap();"';
				streehtml = '<a title="Show on Map" href="javascript:void(0)" '+fun+'> <img style="border:none;" src="'+BASE_URL+'images/map_pointer.png"></a>';
				
			}
			
			
		}else{
			if(this.street_pin_view){
				streehtml = '<img style="border:none;" src="'+BASE_URL+'images/street_icon_disable.png">';
				fun = ' ';
			}
		}
	//alert(obj.card_pr_id);
	     if(itemData[0]['name'] != ''){
		html = " <div class=\"mapbox_top\"></div><div class=\"mapbox_mid\" id=\"mapbox_mid\"><div class=\"mapbox_title\"><span><a href=\""+BASE_URL+"card_detail/"+obj.card_pr_id+"\" ><strong>"+obj.card_name+"</strong></a><br>By "+obj.user_name+"</span> <a href=\"javascript:void(0);\" class=\"closebox\"><img src=\""+BASE_URL+"images/close_button.png\"  id=\"close\" onclick=\"removeInfoBox()\"></a><div class=\"clear\"></div></div><div class=\"mapbox_mid_matter\"><a href=\""+BASE_URL+"card_detail/"+obj.card_pr_id+"\" ><img src=\""+BASE_URL+obj.image_path+"\" ></a><div style=\"width:50px;height:64px;float:left\">"+streehtml+"</div><a href=\"javascript:void(0)\" "+facebook+"><img style=\"border:none;\" src=\""+BASE_URL+"images/facebook_icon_map.png\"></a><a href=\"javascript:void(0)\" "+twitter+" ><img style=\"border:none;\" src=\""+BASE_URL+"images/twitter_icon_map.png\"></a></div></div><div class=\"mapbox_bottom\">&nbsp;</div><div class=\"mapbox-bgshadow\"><img src=\""+BASE_URL+"images/box-shadow.png\"  /></div>";   
		
	    }
	    else{

			if(this.role_id == 1){

				html = "<div class=\"mapbox_top\"><img src=\""+BASE_URL+"images/mapbox_top.png\"></div><div class=\"mapbox_mid\" id=\"mapbox_mid\"><div class=\"mapbox_title\"><span><a href=\""+BASE_URL+"people_flow/"+obj.user_id+"\" ><strong>"+obj.user_name+"</strong></a><br>&nbsp;</span> <a href=\"javascript:void(0);\" class=\"closebox\"><img src=\""+BASE_URL+"images/close_button.png\"  id=\"close\" onclick=\"removeInfoBox()\"></a><div class=\"clear\"></div></div><div class=\"mapbox_mid_matter\"><a href=\""+BASE_URL+"people_flow/"+obj.user_id+"\" ><img src=\""+BASE_URL+obj.image_path+"\"></a></div></div><div class=\"mapbox_bottom\">&nbsp;</div><div class=\"mapbox-bgshadow\"><img src=\""+BASE_URL+"images/box-shadow.png\"  /></div>";     
			}
			else{

				html = "<div class=\"mapbox_top\"><img src=\""+BASE_URL+"images/mapbox_top.png\"></div><div class=\"mapbox_mid\" id=\"mapbox_mid\"><div class=\"mapbox_title\"><span><a href=\""+BASE_URL+"people_flow/"+obj.user_id+"\" ><strong>"+obj.user_name+"</strong></a><br>&nbsp;</span> <a href=\"javascript:void(0);\" class=\"closebox\"><img src=\""+BASE_URL+"images/close_button.png\"  id=\"close\" onclick=\"removeInfoBox()\"></a><div class=\"clear\"></div></div><div class=\"mapbox_mid_matter\"><a href=\""+BASE_URL+"people_flow/"+obj.user_id+"\" ><img src=\""+BASE_URL+obj.image_path+"\"></a></div></div><div class=\"mapbox_bottom\">&nbsp;</div><div class=\"mapbox-bgshadow\"><img src=\""+BASE_URL+"images/box-shadow.png\" /></div>";     
			}
		}
         div.innerHTML=html; 
	
     })	
	    
       
    function removeInfoBox(ib) {
		
      return function() {
        ib.setMap(null);
      };
    }
    //div.style.display = 'none';
    panes.floatPane.appendChild(div);
    this.panMap();
   	
    
  } /*else if (div.parentNode != panes.floatPane) {
    // The panes have changed.  Move the div.
    //div.parentNode.removeChild(div);
    panes.floatPane.appendChild(div);
  }*/ else {
    // The panes have not changed, so no need to create or move the div.
  }
}

/* Pan the map to fit the InfoBox.
 */
InfoBox.prototype.panMap = function() {
  // if we go beyond map, pan map
  var map = this.map_;
  var bounds = map.getBounds();
  if (!bounds) return;

  // The position of the infowindow
  var position = this.latlng_;

  // The dimension of the infowindow
  var iwWidth = this.width_;
  var iwHeight = this.height_;

  // The offset position of the infowindow
  var iwOffsetX = this.offsetHorizontal_;
  var iwOffsetY = this.offsetVertical_;

  // Padding on the infowindow
  var padX = 40;
  var padY = 40;

  // The degrees per pixel
  var mapDiv = map.getDiv();
  var mapWidth = mapDiv.offsetWidth;
  var mapHeight = mapDiv.offsetHeight;
  var boundsSpan = bounds.toSpan();
  var longSpan = boundsSpan.lng();
  var latSpan = boundsSpan.lat();
  var degPixelX = longSpan / mapWidth;
  var degPixelY = latSpan / mapHeight;

  // The bounds of the map
  var mapWestLng = bounds.getSouthWest().lng();
  var mapEastLng = bounds.getNorthEast().lng();
  var mapNorthLat = bounds.getNorthEast().lat();
  var mapSouthLat = bounds.getSouthWest().lat();

  // The bounds of the infowindow
  var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
  var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
  var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
  var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;

  // calculate center shift
  var shiftLng =
      (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
      (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
  var shiftLat =
      (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
      (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);      

  // The center of the map
  var center = map.getCenter();

  // The new map center
  var centerX = center.lng() - shiftLng;
  var centerY = center.lat() - shiftLat;
  flag=0; 
   
  // center the map to the new shifted center
  //map.setCenter(new google.maps.LatLng(centerY, centerX));
  map.setCenter(position);
  
  // Remove the listener after panning is complete.
   if(this.boundsChangedListener_ != null || this.boundsChangedListener_ != undefined ) {  
  	google.maps.event.removeListener(this.boundsChangedListener_);
  }
  this.boundsChangedListener_ = null;
};
function show_card_on_loc(){
	
}