//<![CDATA[

    if (GBrowserIsCompatible()) {
      var gmarkers = [];
      var gicons = [];
	  var htmls =[];
	  var ticono;

	 
	  // == DEFINIR ICONOS  ===
	  gicons["museo"] = new GIcon(G_DEFAULT_ICON,"iconos/museo.png");
	  gicons["museo"].iconSize = new GSize(21,31); 
	  gicons["museo"].shadow="";
      
	  gicons["aeropuerto"] = new GIcon(G_DEFAULT_ICON,"iconos/aeropuerto.png");
	  gicons["aeropuerto"].iconSize = new GSize(21,31); 
	  gicons["aeropuerto"].shadow="";
	  
  	  gicons["playa"] = new GIcon(G_DEFAULT_ICON,"iconos/playa.png");
	  gicons["playa"].iconSize = new GSize(21,31); 
	  gicons["playa"].shadow="";
	  
	  gicons["hospital"] = new GIcon(G_DEFAULT_ICON,"iconos/hospital.png");
	  gicons["hospital"].iconSize = new GSize(21,31); 
	  gicons["hospital"].shadow="";
	  
      gicons["farmacia"] = new GIcon(G_DEFAULT_ICON,"iconos/farmacia.png");
	  gicons["farmacia"].iconSize = new GSize(21,31);
	  gicons["farmacia"].shadow="";

      gicons["info"] = new GIcon(G_DEFAULT_ICON,"iconos/info.png");
	  gicons["info"].iconSize = new GSize(21,31); 
	  gicons["info"].shadow=""; 
 
	  //gicons["banco"] = new GIcon(G_DEFAULT_ICON,"iconos/golf.png");
	  //gicons["banco"].iconSize = new GSize(21,31); 
	  
      gicons["restaurante"] = new GIcon(G_DEFAULT_ICON,"iconos/info1.png");
	  gicons["restaurante"].iconSize = new GSize(21,31); 
	  gicons["restaurante"].shadow=""; 
	
	  gicons["hotel"] = new GIcon(G_DEFAULT_ICON,"iconos/hotel.png");
	  gicons["hotel"].iconSize = new GSize(21,31); 
	  gicons["hotel"].shadow=""; 
	  
      gicons["pension"] = new GIcon(G_DEFAULT_ICON,"iconos/farmacia.png");
	  gicons["pension"].iconSize = new GSize(21,31);
	  gicons["pension"].shadow=""; 
	  	  	  
	  gicons["albergue"] = new GIcon(G_DEFAULT_ICON,"iconos/museo.png");
	  gicons["albergue"].iconSize = new GSize(21,31); 
	  gicons["albergue"].shadow=""; 
      
	  gicons["libreria"] = new GIcon(G_DEFAULT_ICON,"iconos/golf.png");
	  gicons["libreria"].iconSize = new GSize(21,31); 
	  gicons["libreria"].shadow=""; 
	  
      gicons["correos"] = new GIcon(G_DEFAULT_ICON,"iconos/lugarinteres.png");
	  gicons["correos"].iconSize = new GSize(21,31); 
	  gicons["correos"].shadow=""; 

	  gicons["ferry"] = new GIcon(G_DEFAULT_ICON,"iconos/ferry.png");
	  gicons["ferry"].iconSize = new GSize(21,31); 
	  gicons["ferry"].shadow=""; 
	  
      gicons["metro"] = new GIcon(G_DEFAULT_ICON,"iconos/metro1.png");
	  gicons["metro"].iconSize = new GSize(21,31);
	  gicons["metro"].shadow=""; 
	  
	  gicons["tren"] = new GIcon(G_DEFAULT_ICON,"iconos/tren.png");
	  gicons["tren"].iconSize = new GSize(21,31); 
	  gicons["tren"].shadow=""; 
      
	  gicons["tranvia"] = new GIcon(G_DEFAULT_ICON,"iconos/tren.png");
	  gicons["tranvia"].iconSize = new GSize(21,31);
	  gicons["tranvia"].shadow="";  
	  
      gicons["teatro"] = new GIcon(G_DEFAULT_ICON,"iconos/teatro.png");
	  gicons["teatro"].iconSize = new GSize(21,31); 
	  gicons["teatro"].shadow=""; 

	  gicons["lugarinteres"] = new GIcon(G_DEFAULT_ICON,"iconos/lugarinteres.png");
	  gicons["lugarinteres"].iconSize = new GSize(21,31); 
	  gicons["lugarinteres"].shadow=""; 

	  gicons["bus"] = new GIcon(G_DEFAULT_ICON,"iconos/bus.png");
	  gicons["bus"].iconSize = new GSize(21,31); 
	  gicons["bus"].shadow=""; 	  

	  gicons["albergue"] = new GIcon(G_DEFAULT_ICON,"iconos/albergue.png");
	  gicons["albergue"].iconSize = new GSize(21,31); 
	  gicons["albergue"].shadow=""; 	

	  gicons["policia"] = new GIcon(G_DEFAULT_ICON,"iconos/policia.png");
	  gicons["policia"].iconSize = new GSize(21,31); 
	  gicons["policia"].shadow=""; 	 


	// === FIN ICONOS ===
		  

      // == ESTA FUNCION CREA EL MARCADOR
      function createMarker(point,name,html,category) {
        var marker = new GMarker(point,gicons[category]);
		var iconowindow = tipoicono(category);
       
        marker.mycategory = category;                                 
        marker.myname = name;
		marker.icono= gicons[category];
		
		// Formatear el html
		html = '<span class="ventana">'+ iconowindow + html + '<br /><br /><a href=javascript:map.zoomIn()><img src="http://www.mapadebilbao.com/iconos/zoom_in.gif" width="16" height="16" border="0"/></a> <a href=javascript:map.zoomOut()><img src="http://www.mapadebilbao.com/iconos/zoom_out.gif" width="16" height="16" border="0"/></a></span>';
		
		 // Almacenar el nombre para la funcion tooltip 
        marker.tooltip = '<div class="tooltip">'+name+'</div>';
		
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
		
		 //    MOUSEOVER Y MOUSEOUT
        GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden"
        });  

        gmarkers.push(marker);
        return marker;
      }

      // Mostrar los markers de la categoria y se asegura del check
      function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].show();
          }
        }
        // check el checkbox 
        document.getElementById(category+"box").checked = true;
      }

      //  Oculta los markers de la categoria y se asegura de quitar el check
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].hide();
          }
        }
        // quitar el check
        document.getElementById(category+"box").checked = false;
        // cerrar infowindow por si esta abierto en un marcador que se caba de ocultar
        map.closeInfoWindow();
      }

      // Se ha hecho Click en Checkbox
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
        // Reconstruir sidebar
        makeSidebar();
      }

      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }


      // Reconstruir Sidebar para ajustarse a los markers mostrados
      function makeSidebar() {
        var html = "";
        for (var i=0; i<gmarkers.length; i++) {
          if (!gmarkers[i].isHidden()) {
		  	tipoicono(gmarkers[i].mycategory);
            html += '<div class="reg_sidebar">'+ ticono +'<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '</a><br></div>';
          }
        }
        document.getElementById("side_bar").innerHTML = html;
      }

// *********************  SIDEBAR *********************************	  
//  Deveuelve el tipo de Icono para poner en el sidebar al lado del registro

	function tipoicono(x){
		switch (x){
			case "museo":
				// 
				ticono='<img src="iconos/museo_sr.png" width="21" height="21" alt="museo" align="absmiddle"/> ';
			
			break;
			case "aeropuerto":
				ticono='<img src="iconos/aeropuerto_sr.png" width="21" height="21" alt="aeropuerto" align="absmiddle"/> ';
			break;

			case "playa":
				ticono='<img src="iconos/playa_sr.png" width="21" height="21" alt="informacion" align="absmiddle"/> ';
			break;

			case "hospital":
				ticono='<img src="iconos/hospital_sr.png" width="21" height="21" alt="informacion" align="absmiddle"/> ';
			break;
			
			case "farmacia":
				ticono='<img src="iconos/farmacia_sr.png" width="21" height="21" alt="informacion" align="absmiddle"/> ';
			break;

			case "info":
				ticono='<img src="iconos/info_sr.png" width="21" height="21" alt="informacion" align="absmiddle"/> ';
			break;
			
			case "hotel":
				ticono='<img src="iconos/hotel_sr.png" width="21" height="21" alt="hotel" align="absmiddle"/> ';
			break;
			
			case "ferry":
			// Hospital
				ticono='<img src="iconos/ferry_sr.png" width="21" height="21" alt="ferry" align="absmiddle"/> ';
			break;
			
			
			case "metro":
			// metro
				ticono='<img src="iconos/metro1_sr.png" width="21" height="21" alt="metro" align="absmiddle"/> ';
			break;
			
			case "tren":
			// Hospital
				ticono='<img src="iconos/tren_sr.png" width="21" height="21" alt="tren" align="absmiddle"/> ';
			break;
			case "teatro":
			// Hospital
				ticono='<img src="iconos/teatro_sr.png" width="21" height="21" alt="teatro" align="absmiddle"/> ';
			break;
			
			case "lugarinteres":
			// Hospital
				ticono='<img src="iconos/lugarinteres_sr.png" width="21" height="21" alt="lugar de interes" align="absmiddle"/> ';
			break;

			case "bus":
			// Hospital
				ticono='<img src="iconos/bus_sr.png" width="21" height="21" alt="bus" align="absmiddle"/> ';
			break;

			case "albergue":
			// Albergue
				ticono='<img src="iconos/albergue_sr.png" width="21" height="21" alt="albergue" align="absmiddle"/> ';
			break;

			case "policia":
			// POlicia
				ticono='<img src="iconos/policia_sr.png" width="21" height="21" alt="policia" align="absmiddle"/> ';
			break;

			default : ticono="-sin.ico- ";
		}
	  
	  	return ticono;
	  
	  }
	  
	        // ======INI FUNCION TOOLTIP  ======

      function showTooltip(marker) {
      	tooltip.innerHTML = marker.tooltip;
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor=marker.getIcon().iconAnchor;
	var width=marker.getIcon().iconSize.width;
	var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
      }
		// ====== FIN FUNCION TOOLTIP  ======
		
      // MOUSEOVER SIDEBAR
           
      function mymouseover(i) {
        showTooltip(gmarkers[i])
      }
  
      function mymouseout() {
	tooltip.style.visibility="hidden";
      }


	  // crear el mapa
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallZoomControl());
	  
	  map.addControl(new GScaleControl()); 
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(43.26304999669019,-2.9352593421936035), 14);
      map.addControl(new GOverviewMapControl(new GSize(95,95)));
	  
	 
	  	// POSIC =======================
      var posic = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(36,0));
      posic.apply(document.getElementById("control1"));
      map.getContainer().appendChild(document.getElementById("control1"));
		// LEYENDA
      var posic2 = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(37,1));
      posic2.apply(document.getElementById("control2"));
      map.getContainer().appendChild(document.getElementById("control2"));
      // ============================	
	  
	  // ==== Cargar el KML  ====
	  // var kml = new GGeoXml("http://www.mapadebilbao.com/kml/lineas.kml");
      // map.addOverlay(kml);	  

	   // MOUSEOVER TOOLTIP
      var tooltip = document.createElement("div");
      document.getElementById("map").appendChild(tooltip);
      tooltip.style.visibility="hidden";

      // LEER ARCHIVO
      GDownloadUrl("xml/xmlgen_bilbao8.php", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
        for (var i = 0; i < markers.length; i++) {

          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
		  var descripcion = markers[i].getAttribute("descripcion");
		  if (descripcion==""){}
		  else {descripcion=descripcion+'<br>';}	
		  var telefono = markers[i].getAttribute("telefono");
		  if (telefono==""){}
		  
		  else{
		  	telefono='<br><img src="http://www.mapadebilbao.com/iconos/telefono.gif" width="16" height="16" border="0" align="absmiddle" /> '+telefono;
		  }
          var address = markers[i].getAttribute("address");
		  if (address==""){		  	
		  }
		  else {
		  	address='<strong>Direcci&oacute;n:</strong><br>'+ address;
		  }
		  
          var name = markers[i].getAttribute("name");
		  var enlace = markers[i].getAttribute("enlace");
		  if (enlace==""){
		  	
		  }
		  else {
		  	enlace='<br><br><a href="'+enlace+'" target="blank">web</a>';
		  }
          var html = '<span class="infowtitle">'+name+'</span><p><span class="infowtexto">'+descripcion+address+telefono+enlace+'</span>';
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
          map.addOverlay(marker);
        }

        // MOSTRAR U OCULTAR MARKERS
        show("hotel");
        hide("aeropuerto");
        hide("info");
		hide("hospital");
        //hide("farmacia");
		hide("playa");
		hide("museo");
		hide("ferry");
		hide("tren");
		hide("teatro");
		hide("metro");
		hide("lugarinteres");
		hide("bus");
		hide("albergue");
		hide("policia");
       
	   
        makeSidebar();
		

	  
      });
    }

    else {
      alert("Parece que Google Maps API no es compatible con este navegador");
    }
    // http://www.mapadebilbao.com
    //]]>