var Wregla  = 400;
var markers = new Object();
var infoStrings = new Array();
var map;
var panorama;
	
		function iniciar(){

			var myLatlng = new google.maps.LatLng(latitud_centro, longitud_centro);
			var myOptions = {
				scrollwheel: false,
				zoom: zoom_centro,
				center: myLatlng,
				 scaleControl: true,
				 mapTypeControl: false,
                		mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			
			map = new google.maps.Map(document.getElementById("mapa_principal"), myOptions);
			var containerDIV = document.createElement("div");
			barraWalk( containerDIV,map);
                        map.controls[google.maps.ControlPosition.TOP_CENTER].push(containerDIV );
			setMarkers(map, listado_hoteles);
			if(listado_marcas) setMarcasExtras(map,listado_marcas);
			//setMarcasExtras(map,mejorlocal);
			
			
			
			
                }	
				
		
		
			function barraWalk(container,map){
				container.style.width=Wregla+'px';
				container.style.height='25px';
			
				var distanciaDiv = document.createElement("div");
				distanciaDiv.setAttribute('id','distancia');
				container.appendChild( distanciaDiv);
				
				var reglaDiv = document.createElement("div");
				reglaDiv.setAttribute('id','regla');
				distanciaDiv.appendChild(reglaDiv);
				
				var tiempoDiv = document.createElement("div");
				tiempoDiv.setAttribute('id','tiempo');
				distanciaDiv.appendChild( tiempoDiv );
				
				
				var tiempoSpan = document.createElement("span");
				tiempoSpan.setAttribute('id','span_tiempo');
				tiempoDiv.appendChild( tiempoSpan);
				
				google.maps.event.addListenerOnce(map, "tilesloaded", function (){
					calculo_distancia(map,'span_tiempo');
				}); 
				
				google.maps.event.addListener(map, "bounds_changed", function (){
					calculo_distancia(map,'span_tiempo');
				}); 
				
			};
		
			
			function setMarkers(map, locations) {
			        
				var stars = new Array();
				for (var i = 1; i<=5; i++){
					stars[i]= new google.maps.MarkerImage(urlBaseImg+"start_"+i+".png",
									null, //tamaño imagen
									null,  //origen image (0.0)
									new google.maps.Point(17,16)); //posicion del ancla con el mapa
				} 
					
				var shadow = new google.maps.MarkerImage(urlBaseImg+'shadow.png',
									null,
									null,
									new google.maps.Point(17, 16))
			
				 var infowindow = new google.maps.InfoWindow({content: ''});

				
				for (var i = 0; i < locations.length; i++) {

						 var hotel = locations[i];
						 var myLatLng = new google.maps.LatLng(hotel.latitud, hotel.longitud);
						 markers[i]= new google.maps.Marker({
							  
								position: myLatLng,
								map: map,
								shadow: shadow,
								icon: stars[hotel.estrellas]

						  });
						markers[i].id = i;
						var contenidoInfo  = '<div class="info">';
                                                contenidoInfo  +=        '<p class="streetw"><img src="'+urlBaseImg+'streetview.png"/ alt="street view"><br/> <input class="miboton" type="button" value="Street view" onclick="javascript:setStreetView('+hotel.latitud+','+hotel.longitud+')"/></p>';
                                                contenidoInfo  +=        '<p class="nom_hotel">'+listado_hoteles[i].nombre+'</p>';
                                                contenidoInfo  +=        '<p class="direccion">'+listado_hoteles[i].direccion+'</p>';
                                                contenidoInfo  +=        '<p class="url"><a href="http://'+listado_hoteles[i].url+'">'+listado_hoteles[i]['webanchor_'+lang]+'</a></p>';
                                                contenidoInfo  +=        '</div>';
				             
					        
                                                
                                                infoStrings[i]  = contenidoInfo;
					    google.maps.event.addListener(markers[i], 'mouseover',function() {
					              var id = this.id;
							  infowindow.setContent(infoStrings[id] );
							 infowindow.open(map,this);
						});
				}
			};
			
	
			function calculo_distancia(map, id){
					var id=id;
					var elemento = document.getElementById(id);
					if(!elemento) return; 
					
					var bounds = map.getBounds();
					var southWest = bounds.getSouthWest();
					var northEast = bounds.getNorthEast();
					var lat1= northEast.lat();
					var lng1=southWest.lng();
					
					
	 
					var nortWest=new google.maps.LatLng(northEast.lat(),southWest.lng());		
					var distancia=distanciaEntrePuntos(northEast,nortWest); //distancia en metros
					distancia=distancia*Wregla/Wmapa;
					var tiempo= parseInt(distancia/ 66.66); //metros/minuto
					var horas=parseInt(tiempo/60);  
					var minutos=tiempo-(horas*60);
					minutos=Math.round(minutos/10)*10;
					var texto="";
					if (horas >0) {texto +=horas+ " h. ";} 
					if (minutos!=0){texto +=minutos+ " min.";}
					texto+="  walk";
					elemento.innerHTML=texto;
					minutos_jpg=(minutos<20)?"10":"20";
					document.getElementById('regla').style.backgroundImage="url("+urlBaseImg+"fondo_regla_"+minutos_jpg+".gif)";
                                        
				};
				
				/**
				* Calculates the distance between two latlng locations in m.
				* @see http://www.movable-type.co.uk/scripts/latlong.html
				*
				* @param {google.maps.LatLng} p1 The first lat lng point.
				* @param {google.maps.LatLng} p2 The second lat lng point.
				* @return {number} The distance between the two points in km.
				* @private
				*/
				function distanciaEntrePuntos (p1, p2) {
					if (!p1 || !p2) {
						return 0;
					}

					var R = 6371000; // Radius of the Earth in km
					var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
					var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
					var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
					var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
					var d = R * c; 
					return d
			};

	
	
			function setMarcasExtras(map,listado_marcas){
			     	
				var imageScenic =  new google.maps.MarkerImage(urlBaseImg+"scenic.png",
									null, //tamaño imagen
									null,  //origen image (0.0)
									new google.maps.Point(0,31)); //posicion d; el ancla con el mapa
				
				var  imageCircle = new google.maps.MarkerImage(urlBaseImg+"flecha.png",
									null, //tamaño imagen
									null,  //origen image (0.0)
									new google.maps.Point(0,23)); //posicion del ancla con el mapa
				
				var  imageBestLocation = new google.maps.MarkerImage(urlBaseImg+"cbhl.png",
									null, //tamaño imagen
									null,  //origen image (0.0)
									new google.maps.Point(33,27)); //posicion del ancla con el mapa
				
                              
				
                                 for (var i = 0; i < listado_marcas.length; i++) {

						 var marca = listado_marcas[i];
						
						 var myLatLng = new google.maps.LatLng(marca.latitud, marca.longitud);
						 var image;
						 var divClass;
                                                 
						 switch (marca.tipo){
							case "1": 
								image = imageBestLocation;
								divClass ="bestlocation";
								break;
							case "2": 
								image = imageCircle;
								divClass ="barrio_txt";
								break;
							case "3":
								image = imageScenic;
								divClass ="triangulo_txt";
								break;
							default:
                                                            
							break;
						 }
                                                
						 marcas= new google.maps.Marker({
							        cursor: 'hand',
								position: myLatLng,
								map: map,
								icon: image

						  });
                                                  
						overlay = new marcasLabel (map, marcas, marca['texto_'+lang],divClass);
						
				}
			};
				
			//MArcas exras como superposiciones	
			function	marcasLabel (map, marker, text,divClass){
				this.map_ = map;
				this.marker_ = marker;
				this.text_ = text;
				this.divClass_ = divClass;
				 
				 this.setMap(map);

			 
			}
			marcasLabel.prototype = new google.maps.OverlayView();
			marcasLabel.prototype.onAdd = function (){
				var div = document.createElement("div");
				
				//div.style.display = 'none';
				
				div.setAttribute ('class',this.divClass_);
				div.innerHTML = this.text_;
				div.style.position = 'absolute';
				
				div.style.whiteSpace = 'nowrap';
				div.style.overflow = 'hidden';
				div.style.display = 'block';
				 this.div_ = div;
				var panes = this.getPanes();
				panes.overlayLayer.appendChild(div);

			
			};
			marcasLabel.prototype.draw = function(){
			        var proyeccion = this.getProjection();
				var pixelLocation = proyeccion.fromLatLngToDivPixel(this.marker_.getPosition());
				this.div_.style.left = pixelLocation.x + "px";
				this.div_.style.top = pixelLocation.y + "px";
			};
		
                
                
                function addMyMark(location){
                     var mimarca= new google.maps.Marker({
				position: location,
				map: map,
                                draggable: true
                     });
                    return mimarca;

                }
                
                function setStreetView(lat,lng){
                   var myLatLng = new google.maps.LatLng(lat, lng);
                   panorama = map.getStreetView();
                   panorama.setPosition(myLatLng);
                   panorama.setPov({
                      heading: 265,
                      zoom:1,
                      pitch:0});
                  panorama.setVisible(true);
                    
                }