“Como llegar” y la Api de Google Map

Escrito por giancarlo

Nov 11

Me imagino que conocen Google Map y han visto que tiene un servicio para saber como llegar de un punto en el mapa a otro. Es una ayuda muy interesante para conocer la ruta de tu destino. Pero es más interesante que, por ejemplo, un restaurante te diga desde su página web cómo llegar desde el punto donde estás. Un gran servicio verdad?

Google Map tiene un API para javascript, el cual te ayuda a incrustarlo dentro de una página web. Para esto necesitas una clave que Google te la da gratuitamente, también hay un servicio de pago, para que puedas colocarlo en tu página web. Y no solo eso, sino te da más servicios, como agregar íconos, puntos, tipos de vista, zoom y lo que vamos a hablar hoy: “Cómo llegar”.

Primero que todo, la idea es que sepas primero donde está la persona que ha entrado a la página web, cómo puedes saber eso? Con HTML5, si lo sé, no todos los navegadores aceptan HTML5, hasta la fecha. Pero si éste fuese el caso, le daremos un “IF”.

Para saberlo, utilizamos javascript.

Prueba esto (te recomiendo en Firefox):

<script type="text/javascript">
function Mostrar(position){
	alert("Latitud: "+position.coords.latitude+"\nLongitud: "+position.coords.longitude);
}
function NoMostrar(){
	alert("No has dejado mostrar tu ubicacion");
}
navigator.geolocation.getCurrentPosition(Mostrar, NoMostrar);
</script>

Como ven, les dice donde están (en realidad tu operador de internet tiene mucho que ver con este tema, acá en Perú, a muchos les sale su ubicación en la Victoria, a mi personalmente si me sale exactamente en mi casa.

Ahora hay otro tema, debemos validar si el navegador acepta “navigator.geolocation”, por ejemplo, por ahora IE no lo acepta (benditos los de Microsoft, como siempre!).

Cambiamos la séptima línea:

if(typeof navigator.geolocation != "undefined"){
	navigator.geolocation.getCurrentPosition(Mostrar, NoMostrar);
}else{
	NoMostrar();
}

Por cierto, hasta ahora, Firefox y Safari parecen que tienen un problema, y es que la primera vez que pruebas esto funciona, pero luego no corre nada. Como si no se llamara a ninguna función. Para solucionar el problema, lo que encontré fue:

navigator.geolocation.getCurrentPosition(Mostrar, NoMostrar,  {timeout: 10000});

Luego de 10 segun| irá a la segunda opción, como si no se haya dejado ver la ubicación.

Bien, esto fue la primera idea, ahora, cómo muestro el mapa y el cómo llegar? Fácil!

<div id="map" style="width: 500px; height: 350px;"></div>
<!-- LLAMAMOS AL JS DE GOOGLE MAP -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAUUcNQA6lo9smGVwtoP1BPBRRrVtrPu_cMo7ogBsWGtYzf21qqxQQv5yZM4Ol0v0js2H9TLjlWaaYJA" type="text/javascript"></script>
<script type="text/javascript">
/* PRIMERO DEBO SABER LA LATITUD Y LONGITUD A DODNE QUIERO LLEGAR */
var longitud = -77.03274250030518;
var latitud = -12.113809456579942;
 
function Mostrar(position){
	if (GBrowserIsCompatible()) {
		var wp = new Array();
		wp[1] = new GLatLng(latitud, longitud);
		/* ESTAMOS INDICANDO DONDE ESTÁ UBICADA LA PERSONA QUE ENTRÓ A LA WEB */
		wp[0] = new GLatLng(position.coords.latitude, position.coords.longitude);
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(latitud, longitud), 15);
		directions = new GDirections(map);
		directions.loadFromWaypoints(wp);
	}
}
function NoMostrar(){
	if (GBrowserIsCompatible()) {
		var wp = new Array();
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(latitud, altitud), 15);
		var point = new GLatLng(latitud, altitud);
		var marker = new GMarker(point,{title:"Aquí estoy!"});
		map.addOverlay(marker);
	}
}
 
if(typeof navigator.geolocation != "undefined"){
	navigator.geolocation.getCurrentPosition(Mostrar, NoMostrar,  {timeout: 10000});
}else{
	NoMostrar();
}
</script>