///////////////////////////////////////////////////////////////////////////////////////
// GOOGLE MAPS
////////////////////////////////////////////////////////////////////////////////////////

	var donde="google_maps";
	var centro_lat=36.71933;
	var centro_long=-4.537804;
	
	
	var geocoder;
	var map;
    var center;
	var gmarkers = [];
	var gmarkers_punto = [];
	numero_marcas=1;
    var tooltip = document.createElement("div");
	
	var  marcas_bus = [];
	var  marcas_lugares = [];
	
	function showTooltip(marker) {
      	tooltip.innerHTML = marker.tooltip;
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
		var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
		var anchor=marker.getIcon().iconAnchor;
		var width=marker.getIcon().iconSize.width;
		var height=tooltip.clientHeight;
		var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width-18, offset.y - point.y -anchor.y -height-2));
		pos.apply(tooltip);
		tooltip.style.visibility="visible";
      }
	  
	/////////////
   // Crear marca, y pogon texto 
   ////////////////
	function createMarker(point, myIcon,tipo,titulo,texto,imagen) {
	  var marker = new GMarker(point,{icon:myIcon});
	 

	 
	 if (tipo==1){ // Lugar de interes
	
	 marcas_lugares.push(marker);
		  ficha='<div class="caja_pinteres">';
		  if (imagen!=""){
		  ficha+='<img src="'+imagen+'" title="'+titulo+'" />';
		  }
				  
		  ficha+='<div class="titulo"><b>'+titulo+'</b></div>'
		  ficha+='<p>'+texto+'</p>';
		  ficha+='</div>';
	 }
	 
 	  if (tipo==2){ // Hotel
		  ficha='<div class="caja_pinteres" style="margin-left:-130px">';
		  if (imagen!=""){
		  ficha+='<img src="'+imagen+'" title="'+titulo+'" />';
		  }
				  
		  ficha+='<div class="centrado"><b>'+texto+'</b></div>'
		  ficha+='</div>';
	 }


 	 if ( (tipo==3) || (tipo==4) ){ // Bus o metro
	
	      marcas_bus.push(marker);
		  ficha='<div class="caja_transporte">';
		  if (imagen!=""){
		  ficha+='<img src="'+imagen+'"/>';
		  }
		  ficha+='<p>'+texto+'</p>'
		  ficha+='</div>';
  	 }


	  marker.tooltip = ficha ;
	    
	  	  
	  GEvent.addListener(marker,"mouseover", function() {
          		showTooltip(marker);
       });
       GEvent.addListener(marker,"mouseout", function() {
				tooltip.style.visibility="hidden"
       });
			
	  // Guardar los datos de la marca
	 /* gmarkers[numero_marcas] = marker;
	  gmarkers_punto[numero_marcas] = point;
	  numero_marcas++;*/
	  return marker;
	}


///////////////////////////////////////
// CONTROL DE ZOOMM MAS
//////////////////////////////////////
var Control_Zoom_IN = function() {	};

Control_Zoom_IN.prototype = new GControl(true);

Control_Zoom_IN.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.innerHTML = '<img style="cursor:pointer" src="' + donde + '/images/ico_ampliar.png";" border="0">';
	container.style.width='30px';
	container.style.height='30px';
	
	
	GEvent.addDomListener(container, "click", function() {
		map.zoomIn();
	});
	
	map.getContainer().appendChild(container);
	
	return container;
};

Control_Zoom_IN.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 10));
}
/////////////////////////////


///////////////////////////////////////
// CONTROL DE ZOOMM MENOS
//////////////////////////////////////
var Control_Zoom_OUT = function() {	};

Control_Zoom_OUT.prototype = new GControl(true);

Control_Zoom_OUT.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.innerHTML = '<img style="cursor:pointer" src="' + donde + '/images/ico_alejar.png";" border="0">';
	container.style.width='30px';
	container.style.height='30px';

	
	
	GEvent.addDomListener(container, "click", function() {
		map.zoomOut();
		
	});
	

	map.getContainer().appendChild(container);
	
	return container;
};

Control_Zoom_OUT.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(35, 10));
}
/////////////////////////////


///////////////////////////////////////
// CONTROL DE MAPA -- SATELITE
//////////////////////////////////////
var Control_MAPA_SATELITE = function() {	};

Control_MAPA_SATELITE.prototype = new GControl(true);

Control_MAPA_SATELITE.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.innerHTML = '<img style="cursor:pointer" src="' + donde + '/images_'+idioma_google_maps+'/ico_satelite.png";" border="0">';
	container.style.width='30px';
	container.style.height='30px';
	container.style.left='655px';
	
	GEvent.addDomListener(container, "click", function() {
		map.setMapType(G_SATELLITE_MAP);
	});
	
	map.getContainer().appendChild(container);
	
	return container;
};

Control_MAPA_SATELITE.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(130, 10));
}

///////////////////////////////////////
// CONTROL DE MAPA -- DIBUJO
//////////////////////////////////////
var Control_MAPA_DIBUJO = function() {	};

Control_MAPA_DIBUJO.prototype = new GControl(true);

Control_MAPA_DIBUJO.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.innerHTML = '<img style="cursor:pointer" src="' + donde + '/images_'+idioma_google_maps+'/ico_mapa.png";" border="0">';
	container.style.width='30px';
	container.style.height='30px';
	container.style.left='730px';
	
	
	GEvent.addDomListener(container, "click", function() {
		map.setMapType(G_NORMAL_MAP);
	});
	
	map.getContainer().appendChild(container);
	
	return container;
};

Control_MAPA_DIBUJO.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(50, 10));
}



/////////////////////////////////////////////////////////////////

    //Cargar el mapa con las opciones que desses
    function load() {

      if (GBrowserIsCompatible()) {
	
		map = new GMap2(document.getElementById("map")); // Mapa de google
		
		
        map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
        tooltip.style.visibility="hidden";
	  
		geocoder = new GClientGeocoder();
		
		// Controles de zoom
  	 	map.addControl(new Control_Zoom_IN());
		map.addControl(new Control_Zoom_OUT());
		
		// tipo del mapa
		//JOSE map.addControl(new Control_MAPA_DIBUJO()); // Control del mapa de dibujo
		//JOSE map.addControl(new Control_MAPA_SATELITE()); // Control del mapa de satelite
		
		
		
      // ====== Restringir el zoom a un maximo y un minimo =====
      // Get the list of map types      
      var mt = map.getMapTypes();
      // Sobreesccribe las funciones de getMinimumResolution() y getMaximumResolution() 

      for (var i=0; i<mt.length; i++) {
        mt[i].getMinimumResolution = function() {return 5;} // Zoom minimo 13
        mt[i].getMaximumResolution = function() {return 18;}  // Zoom maximo 7
      }
	  
	  
	   center = new GLatLng(centro_lat, centro_long); // Centro de Hotel  		
		

		map.setCenter(center,12); //Centro del mapa, con zoom de 13
        //JOSE map.setMapType(G_HYBRID_MAP);
		map.setMapType(G_NORMAL_MAP);
////////////////////////////////////////////////////////
      // Add a move listener to restrict the bounds range
      GEvent.addListener(map, "move", function() {
        checkBounds();
      });

      // The allowed region which the whole map must be within
	  // Limite de la region donde se mueve
	  
	   var allowedBounds = new GLatLngBounds(new GLatLng(33.302986,-10.568848),new GLatLng(44.777936,5.888672));

      
      // If the map position is out of range, move it back
      function checkBounds() {
        // Perform the check and return if OK
        if (allowedBounds.contains(map.getCenter())) {
          return;
        }
        // It`s not OK, so find the nearest allowed point and move there
        var C = map.getCenter();
        var X = C.lng();
        var Y = C.lat();

        var AminX = allowedBounds.getSouthWest().lng();
        var AminY = allowedBounds.getSouthWest().lat();

        var AmaxX = allowedBounds.getNorthEast().lng();
        var AmaxY = allowedBounds.getNorthEast().lat();
		

        if (X < AminX) {X = AminX;}
        if (X > AmaxX) {X = AmaxX;}
        if (Y < AminY) {Y = AminY;}
        if (Y > AmaxY) {Y = AmaxY;}
        //alert ("Restricting "+Y+" "+X);
        map.setCenter(new GLatLng(Y,X));
      }



///////////////////////////////////////////////////////

        // Download the data in data.xml and load it on the map. The format we
        // expect is:
        // <markers>
        //   <marker lat="37.441" lng="-122.141"/>
        //   <marker lat="37.322" lng="-121.213"/>
        // </markers>
        GDownloadUrl(donde + "/coordenadas.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
		
          for (var i = 0; i < markers.length; i++) {
			
		    var tipo           = markers[i].getAttribute("tipo")
            var titulo         = markers[i].getAttribute("titulo")
		    var texto          = markers[i].getAttribute("texto")
			var imagen         = markers[i].getAttribute("imagen")
		
		
		  // Icono de del sitio	  			
			var icon = new GIcon();
			if (tipo=='1'){ // Lugares de interes
				icon.image = donde + "/images/ico_pinteres.png";
				icon.shadow = donde + "/images/sombra_pinteres.png";
				icon.iconSize = new GSize(17, 20);
				icon.shadowSize = new GSize(27, 20);
				icon.iconAnchor = new GPoint(17, 20);
				icon.infoWindowAnchor = new GPoint(16, 10);
			}
		
		
			if (tipo=='2'){ // Princesa Sofia
				icon.image = donde + "/images/ico_princesa.png";
				icon.shadow = donde + "/images/sombra_princesa.png";
				icon.iconSize = new GSize(116, 64);
				icon.shadowSize = new GSize(140, 49);
				icon.iconAnchor = new GPoint(116, 64);
				icon.infoWindowAnchor = new GPoint(16, 10);
		    }
		
			if (tipo=='3'){ // Bus
				icon.image = donde + "/images/ico_bus.gif";
				icon.iconSize = new GSize(20, 21);
				icon.iconAnchor = new GPoint(26, 31);
				icon.infoWindowAnchor = new GPoint(16, 10);
		    }
		
			if (tipo=='4'){ // Metro
				icon.image = donde + "/images/ico_metro.gif";
				icon.iconSize = new GSize(36, 28);
				icon.iconAnchor = new GPoint(26, 31);
				icon.infoWindowAnchor = new GPoint(16, 10);
		    }
			
			
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
			
			map.addOverlay(createMarker(point, icon,tipo,titulo,texto,imagen));
			
          }
		  
		  ///////////////////////////////////////////
		/// Crear las marcas y mostrar solo segun el zoom
		//////////////////////////////////////////
  		 
			 var mgr = new GMarkerManager(map, {borderPadding:1});
			 mgr.addMarkers(marcas_bus,16,17); // Iconos de ciudaddes con zoom 7 y mas
			 mgr.addMarkers(marcas_lugares,12,17); // Iconos de ciudaddes con zoom 7 y mas
			 
			 mgr.refresh();
			 
		 });
        
     
	   }
   }