Google map con Street View

Hace tiempo que no os cuento las cosas que voy descubriendo, hoy he tenido que realizar un cambio que considero interesante de comentar.

Lo normal para mostrar la localizacion de un cliente es mostrar el mapa en modo carretera, pero ayer nos pidieron que se mostrara en modo street view, para que se viera su entrada.

El codigo normal javascript es:


	var map;
	var directionsDisplay = new google.maps.DirectionsRenderer();
	var directionsService = new google.maps.DirectionsService();
	function initialize() {
	     var myLatlng = new google.maps.LatLng('.$latitud.','.$longitud.');
	     var myOptions = {
		zoom: '.$zoom.',
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	     }
	     map = new google.maps.Map(document.getElementById("map"), myOptions);
	     var marker = new google.maps.Marker({
		position: myLatlng,
		map: map,
		title:"Estamos aquí"
	      });
	}
	function calcRoute() {
		var start = document.getElementById("fromAddress").value;
		var end = new google.maps.LatLng('.$latitud.','.$longitud.');
		var request = {
			origin:start,
			destination:end,
			travelMode: google.maps.DirectionsTravelMode.DRIVING,
			unitSystem: google.maps.DirectionsUnitSystem.METRIC,
			region: "es"
		};
		directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setMap(map);
				directionsDisplay.setPanel(document.getElementById(\'pasos\'));
 				directionsDisplay.setDirections(response);
			} else
				alert("No existen rutas entre ambos puntos");
		});
	}
	window.onload = initialize;

Para que al entrar en la página salga el street view devemos hacer algunos cambios:

function initialize() {
	var myLatlng = new google.maps.LatLng('.$latitud.','.$longitud.');
	var myOptions = {
		zoom: '.$zoom.',
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map"), myOptions);

	var marker = new google.maps.Marker({
		position: myLatlng,
		map: map,
		title:"Estamos aquí"
	});
}

Lo cambiamos por:

function initialize() {
	var myLatlng = new google.maps.LatLng('.$latitud.','.$longitud.');
	var panoramaOptions = {
		position: myLatlng,
		pov: {
			heading: 0,
			pitch: 0
		},
		visible: true
	};
	var panorama = new google.maps.StreetViewPanorama(document.getElementById("map"), panoramaOptions);

	var marker = new google.maps.Marker({
		position: myLatlng,
		map: map,
		title:"Estamos aquí"
	});
}

Lo que hemos hecho es cambiar el modo de mostrar el mapa con StreetVewPanorama, los dos valores que tiene son el div donde se mostrara y sus opciones:

position: es el punto donde esta la ubicación del cliente
dentro de pov:
heading: es el angulo de giro para poder ver la imagen de cliente.
pitch: corresponde al nivel de zoom.

Para que al calcular la ruta se viera el mapa en lugar del Street View realizamos el siguiente cambio en la función calcRoute():

function calcRoute() {
	var myLatlng = new google.maps.LatLng('.$latitud.','.$longitud.');
	var myOptions = {
		zoom: '.$zoom.',
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map"), myOptions);
	----- dejamos todo lo que había----
}

Con esto hacemos que al calcular la ruta dibuje el mapa…

jquery y V3 Google Maps

En esta ultima semana he estado mirando como poder tener 3 select relacionados por jquery y que al variarlos se modifique el mapa.
El ejemplo es para establecimientos concertados con un cliente que los teniamos clasificados por Provincia, Localidad y el nombre del establecimiento.

Al entrar en la página cargabamos los select o combos con todos los datos disponibles. Y el mapa se muestra con todos los establecimientos concertados.

<select name='provincia' id='provincia' class='selectTienda' ></select>
<select name='localidad' id='localidad' class='selectTienda2' ></select>
<select name='tienda' id='tienda' class='selectTienda2' ></select>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>';
	<script type="text/javascript" src="/js/jquery.ui.map.js"></script>
	<script type="text/javascript" >
		$("#mapa").gmap().bind("init", function(ev, map) {
<?
		for($i=0; $i < $totalti ; $i++) {
			echo'
				$("#mapa").gmap("addMarker", {
					"position": "'.$lat[$i].','.$lon[$i].'", 
					"bounds": true, 
					"title":"'.$titulo[$i].'"
				}).click(function() {
					$("#mapa").gmap("openInfoWindow", {"content": "'.$texto[$i].'"}, this);
				});
			';
		};
?>
		});
	</script>

Al no tener boton de buscar no usamos el formulario. Para controlar los cambios usamos el siguiente codigo:

$(document).ready(function(){
	$("#provincia").change(function() {
		$("#localidad").empty();
		$.post("/controlador/ajax.php",
			{combo:"localidad",provincia:$(this).val()},
			function(data){
				$("#localidad").html(data);
			}
		);

		$("#tienda").empty();
		$.post("/controlador/ajax.php",
			{combo:"tienda",provincia:$(this).val()},
			function(data){
				$("#tienda").html(data);
			}
		);

		$('#mapa').gmap('clear', 'markers');
		$('#mapa').gmap('set', 'bounds', null);
		$.getJSON( "/controlador/ajax2.php?combo=provincia&provincia="+$(this).val(), function(resData) {
			$.each( resData.miRecorrido, function(i, elRecorrido) {
				$("#mapa").gmap("addMarker", {
					"position": new google.maps.LatLng(elRecorrido.lat, elRecorrido.lon),
					"bounds": true, 
					"title": elRecorrido.titulo
				}).click(function() {
					$("#mapa").gmap("openInfoWindow", { "content": elRecorrido.texto }, this);
				});

			});
		});
	});

	$("#localidad").change(function() {
		$("#tienda").empty();
		$.post("/controlador/ajax.php",
			{combo:"tienda",localidad:$(this).val()},
			function(data){
				$("#tienda").html(data);
			}
		);

		$('#mapa').gmap('clear', 'markers');
		$.getJSON( "/controlador/ajax2.php?combo=localidad&localidad="+$(this).val(), function(resData) {
			$.each( resData.miRecorrido, function(i, elRecorrido) {
				$("#mapa").gmap("addMarker", {
					"position": new google.maps.LatLng(elRecorrido.lat, elRecorrido.lon),
					"bounds": true, 
					"title": elRecorrido.titulo
				}).click(function() {
					$("#mapa").gmap("openInfoWindow", { "content": elRecorrido.texto }, this);
				});

			});
		});
	});
	$("#tienda").change(function() {

		$('#mapa').gmap('clear', 'markers');
		$.getJSON( "/controlador/ajax2.php?combo=tienda&tienda="+$(this).val(), function(resData) {
			$.each( resData.miRecorrido, function(i, elRecorrido) {
				$("#mapa").gmap("addMarker", {
					"position": new google.maps.LatLng(elRecorrido.lat, elRecorrido.lon),
					"bounds": true, 
					"title": elRecorrido.titulo
				}).click(function() {
					$("#mapa").gmap("openInfoWindow", { "content": elRecorrido.texto }, this);
				});

			});
		});
	});
})

Al variar la provincia se varian los select de localidades y establecimientos y el mapa con los establecimientos en esa provincia.
Si se varia la localidad se varia el combo de establecimientos y el mapa con los establecimientos de esa localidad
Al seleccionar un establecimiento se muestra en el mapa la ubicación del mismo.

La documentación esta en: http://code.google.com/p/jquery-ui-map/wiki/Examples

Google +

V3 de Google maps

En este mes de mayo deja de estar operativa la version V2 de googlemaps, y se dan algunos cambios interesantes.

Desaparece la necesidad de una API por dominio, con lo que resulta mas facil repetir el codigo en todas las Web.

Para recuperar la api de google basta la llamada al siguiente javascript:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>

Luego definimos nuestro codigo javascript personalizado:

<script type="text/javascript">
//Definimos la variable map
	var map;
//Estas dos variables son para mostrar el camino
	var directionsDisplay = new google.maps.DirectionsRenderer();
	var directionsService = new google.maps.DirectionsService();
//Definimos una funcion que se ejecutara al terminar de cargarse la Web
	window.onload =  function() {
//Generamos un punto a partir de los datos de latitud y longitud
		var myLatlng = new google.maps.LatLng($latitud.",".$longitud);
//Generamos las opciones del mapa, zoom, cual sera el punto central y el tipo de mapa, en este caso mapa de carreteras
		var myOptions = {
			zoom: $zoom,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}
//Definimos el mapa en el div mapacon las opciones antes indicadas
		map = new google.maps.Map(document.getElementById('mapa'), myOptions);

// Definimos una marca en el mapa, para lo cual indicamos la posicion, que coincide con el centro definido anteriormente, se
// hace en el mapa antes definido, definimos un titulo para cuando ponemos el raton encima y si queremos podemos definir un
// icono distinto al habitual usamos icon.
		var marker = new google.maps.Marker({
			position: myLatlng, 
			map: map,
			title:"Situe su alojamiento",
			icon: "/imagenes/logo_google.png"
		});

//Si se desean recuperar las cordeenadas donde se hace click podemos incluir el siguiente codigo:
// Añadimos un evento listener para capturar los click sobre el mapa y que añada una marca en nuestro mapa, a la vez que
// recuperamos los datos de latitud, longitud y zoom

		function addMarker(location) {
			if (marker) marker.setMap(null);
			marker = new google.maps.Marker({
				position: location,
				map: map
			});

			var matchll = /\(([-.\d]*), ([-.\d]*)/.exec(location);
			if (matchll) {
				var lat = parseFloat( matchll[1] );
				var lon = parseFloat( matchll[2] );
				lat = lat.toFixed(6);
				lon = lon.toFixed(6);
			}

			document.getElementById('lat').value = lat;
			if(document.getElementById('lat').value == "undefined")	{
				document.getElementById('lat').value = "";
			}
			document.getElementById('lon').value = lon;
			if(document.getElementById('lon').value == "undefined")	{
				document.getElementById('lon').value = "";
			}
		}

		google.maps.event.addListener(map, 'click', function(event) {
			addMarker(event.latLng);
		});
//Aqui termina el recuperar el punto marcado.
	}

// Aqui definimos una funcion para calcular la ruta entre dos puntos, entendemos como destino el punto marcado en el mapa
// el punto de origen lo introduce el visitante mediante formulario.
	function calcRoute() {
		var start = document.getElementById('fromAddress').value;
		var end = new google.maps.LatLng(<?=$latitud.",".$longitud?>);
		var request = {
			origin:start, 
			destination:end,
			travelMode: google.maps.DirectionsTravelMode.DRIVING,
			unitSystem: google.maps.DirectionsUnitSystem.METRIC,
			region: 'es'
		};
		directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setMap(map);
				directionsDisplay.setPanel(document.getElementById('pasos'));
				directionsDisplay.setDirections(response);
			} else
				alert("No existen rutas entre ambos puntos");
		});
	}
</script>

El codigo para ver el mapa en la Web seria:

<div id="mapa" style="width: $width; height: $height;"></div>

Si queremos calcular la ruta podemos poner este formulario

<div id="pasos"></div>
<form class="formCalcular" action="" onsubmit="calcRoute(); return false">LOCALIDAD DE ORIGEN:

<input class="texto_form" id="fromAddress" type="text" name="from" size="40" value="Localidad de origen" />
<input id="toAddress" type="hidden" name="to" value="<?=$longitud." />" />
<input class="botonAzul" style="margin-left: 10px;" type="submit" name="submit" value="Como llegar" /></form> 

Si queremos recuperar el valor de latitud, longitud y zoom.

Coordenadas: Latitud:<input class="C100" id="lat" type="text" name="lat" value="" />
Longitud: <input class="C100" id="lon" type="text" name="lon" value="" />
Zoom: <input class="C60" id="zoom" type="text" name="zoom" value="" />

Espero que os sirva…

Google +

Red de Blog con WP multisite

Se ha instalado WP 3.4.2 al que se le ha hecho multiblog, para lo cual se han modificado el siguiente archivo:

  • wp-config.php:

/* Multisite */
define(‘WP_ALLOW_MULTISITE’, true);

Posteriormente accedemos al panel de administración y nos vamos a

Herramientas –> Configuración de la red

Es necesario desactivar los plugins para realizar la activacion de multisite.
Si no te aparece en español el menú de WP debes descargarte el modulo de idiomas, subirlo a tu servidor y modificar el siguiente archivo:

  • wp-config.php:

define(‘WPLANG’, ‘es_ES’);

Si estamos de acuerdo con los parámetros del Detalle de la red le damos a instalar.

En la siguiente pantalla se nos indican una serie de modificaciones a aplicar a dos archivos:

  • wp-config.php
  • .htaccess

No indico los cambios pues son personalizados para cada WP en función de la pantalla anterior.

Una vez realizados estos cambios se nos pedira reiniciar el WP, esto es salir del panel de administración y volver a entrar, y ya tenemos el blog multisite o multiblog o red de blog.

Al entrar de nuevo en el panel de administración deberemos activar de nuevo los plugins.

Google +

Copia de seguridad de los Correos del Outlook para 2003

Los pasos a seguir para crear la copia de seguridad son:

• En Archivo seleccionamos Importar y Exportar

• En la ventana q se abre seleccionamos Exportar a un archivo y pulsamos Siguiente

• En la ventana q se abre seleccionamos Archivo de carpetas personales (.pst) y pulsamos Siguiente

• En la nueva ventana marcamos Carpetas Personales y marcamos debajo Incluir subcarpetas y pulsamos Siguiente

• En la siguiente ventana nos indica donde se guardara la copia del archivo, yo cuando lo hago le añado al nombre la fecha.
• En mi caso pongo D:\backup20121026.pst pero eso es una opción personal y le damos a Finalizar

• En la siguiente ventana solo aceptar.

• Este proceso tarda unos cuantos minutos, en función de la cantidad de carpetas y correos que tengas.

Una vez que tenemos generado el fichero:

• En Archivo seleccionamos Administración de archivos de datos…

• En la ventana q se abre pulsamos el botón Agregar

• En la nueva ventana seleccionamos Archivo de carpetas personales (.pst) de Office Outlook Pulsamos Aceptar

• Se nos abre una ventana de explorador de archivos el seleccionamos el archivo antes creado, en mi caso D:\backup20121026.pst

• Al seleccionarlo se abre una nueva ventana en la que podemos darle nombre a esta carpeta personal yo le suelo poner la fecha para controlar los correos que hay en ella. Le damos a Aceptar y hemos terminado.

• Ya solo debes cerrar las ventanas abiertas

Al volver al Outlook veras que a nivel de Carpetas personales existe una nueva carpeta con el nombre que le pusieras en el ultimo paso. Verificamos que las dos carpetas tienen los mismos correos y podemos ir borrando de la que esta en primer lugar, yo como norma dejo los de la ultima semana y borro los anteriores.

Si esto no funciona deberás ponerte en contacto con alguna tienda.

Google +

Darse de Alta en Internet

El otro día una prima me pidio que le instalara un antivirus en su ordenador. Y es curioso, peor si no tienes correo electrónico no puedes hacerlo.
Por lo que fuimos a Google para darla de alta en Gmail, pero que curioso para darte de alta en gmail te piden que tengas una cuenta de correo alternativa.
Por lo que la di de alta en mi dominio y ya pudimos darla de alta en gmail, luego le instale el antivirus.
Despues y ya que estabamos instalando le puse el skype, y tambien me pidio una cuenta de correo….
El único que no la pidio fue el Office al actualizarlo.

Hace unos años si no tenias impresora el ordenador no servia para nada, hoy en dia si no tienes correo electrónico no puedes hacer nada.

Todavia me queda otro capitulo que es explicarle las redes sociales, para lo cual tendremos que volver a usar el correo electrónico.

Google +

Configurar el correo electrónico con Outlook

Ejemplo de configacion de una cuenta de correo de un dominio alojado en nuestro server:

Abrimos el outlook en herramientas, seleccionamos cuentas de correo y agregar cuenta de correo.

En la pantalla indicamos nuestro nombre, direccion de correo electrónico, contraseña y los servidores de entrada y salida:

ej: mail.vitovi.com

Por configuracion usamos el mismo en ambos servidores, pop3 y smtp, tambien seria valido para IMAP. Cada cliente debera cambiar vitovi.com por su dominio.

En configuración avanzada debemos indicar mi servidor de salida SMTP requiere autentificacion.

Cerramos avanzadas y listo.

Ya podemos darle a probar y debemos recibir el correo de prueba de outlook.