Hola a todos:
A veces nos interesa poner el típico enlace de “Como llegar” en nuestra web, o en una app que estemos construyendo por ejemplo con Phonegap, y nos interesa que la dirección que le indicamos se abra en la aplicación nativa de mapas del móvil, que suele funcionar mejor y la interfaz resulta mas familiar para el usuario que esta acostumbrado a utilizar su plataforma móvil.
Veamos las diferentes tipos de url que podemos utilizar en los liks para abrir mapas.
Por defecto:
Sabemos que tenemos el link estándar de google maps que podría ser algo así:
<a href="http://maps.google.com?q=laubideta+16+matiena+abadiano">Mostrar mapa</a>
iOS:
Sin embargo para que nos abra la aplicacion de mapas nativa de iOS (iPhone) deberemos poner una url como esta:
<a href="http://maps.apple.com/maps?q=laubideta+16+matiena+abadiano">Mostrar Mapa en iOS</a>
Y si queremos que nos trace una ruta desde el punto en el que nos encontramos hasta un punto de destino tenemos que usar una url como esta:
<a href="http://maps.apple.com/maps?saddr=Current%20Location&daddr=Universidad+de+deusto+bilbao">como llegar Ios</a>
En el parámetro saddr ponemos Current%20Location para indicar que el punto de inicio es el sitio donde nos situamos en este momento, podemos indicar una dirección de inicio de la ruta en lugar de “Current Location” , y en saddr ponemos la dirección de destino.
Tambien podemos indicarle la dirección mediante coordenadas de latitud y longitud:
<a href="http://maps.apple.com/maps?saddr=Current%20Location&daddr=43.12955890000001,-2.542329300000006">Como llegar en IOs - coordenadas</a>
Android:
Para que se abra directamente la aplicación de mapas de Android usaremos:
<a href="geo:0,0?daddr=Laubideta+16+Abadiano+bizkaia">como llegar Android</a>
Si lo que queremos es indicar la dirección por sus coordenadas seria:
<a href="geo:43.1689947,-2.608256200000028">Como llegar Android - Coordenada</a>
Por desgracia este tipo de url no permite indicarle un punto de inicio para establecer una ruta, una vez abierto el mapa el usuario deberá seleccionar en la aplicación que le indique la ruta si así lo desea.
Windows Phone:
Las urls anteriores no funcionan en Windows Phone, que utilizan su propio formato:
<a href="maps:Elorrio+Bizkaia">Abrir mapa en Windows Phone</a>
Por coordenadas sería:
<a href="maps:43.1689947,-2.608256200000028">Abrir mapa en Windows phone por coordenadas</a>
De esta manera podemos elegir que url nos interesa.
Si estamos trabajando con Phonegap/Apache Cordova elegiremos la que se ajuste a la plataforma para la que estemos utilizando.
A modo de información os comento que otra forma de hacerlo en Phonegap puede ser utilizar InAppBrowser de la siguiente manera:
window.open("http://maps.google.com/?q="+ address,"_system");
Si estamos desarrollando una web en php una opción es detectar la plataforma y mostrar el link con la url que corresponda dependiendo de este.
Para detectar dispositivos móviles en php se puede utilizar la clase php-mobile-detect que dispone de los siguientes metodos: isAndroid(), isAndroidtablet(), isIphone(), isIpad(), isBlackberry(), isBlackberrytablet(), isPalm(), isWindowsphone(), isWindows(), isGeneric(), isMobile().
Un ejemplo de como la podríamos usar para mostrar un enlace dependiendo del dispositivo seria este:
<?php
include('Mobile_Detect.php');
$detect = new Mobile_Detect();
if( $detect->isAndroid() ) {
// Android
$url="geo:0,0?daddr=Universidad+de+deusto+bilbao";
} elseif ( $detect->isIphone() ) {
// iPhone
$url="http://maps.apple.com/maps?saddr=Current%20Location&daddr=Universidad+de+deusto+bilbao";
} elseif ( $detect->isWindowsphone() ) {
// Windows Phone
$url="maps:Universidad+de+deusto+bilbao";
} else{
// Por defecto
$url = 'http://maps.google.com?daddr=Universidad+de+deusto+bilbao';
}
echo '<a href="'.$url.'">Mostrar Mapa</a>';
?>
Ahora os mostraré un sencillo ejemplo de como podemos hacer esto con javascript:
Primero vamos a crear una función en javascript que he llamado showMap:
Para hacer un ejemplo de forma rápida podéis pegar este código en el head.
// ****************************************************************//
// * Función: showMapa() *//
// * Descripción: Abre el mapa nativo del dispositivo móvil *//
// * Autor: Eduardo Revilla Vaquero *//
// ****************************************************************//
showMap=function(q)
{
var device = navigator.userAgent;
var url = 'http://maps.google.com?daddr='+q;
if (device.match(/Iphone/i) || device.match(/iPhone|iPad|iPod/i))
{
// iOs
url='http://maps.apple.com/maps?saddr=Current%20Location&daddr='+q;
}
else if(device.match(/Android/i))
{
// Android
url='geo:0,0?q='+q;
}
else if(device.match(/Windows Phone/i))
{
// windows phone
url='maps:'+q;
}
window.location.href = url;
}
Y después en el body donde queramos mostrar el enlace al mapa podremos algo como esto:
<a href="#" onclick="showMap('Universidad+de+Deusto+Bilbao')">Mostrar mapa</a>
Y solo con este pequeño código podemos redirigir la petición y abrir el mapa nativo del móvil independientemente de la plataforma en la que nos encontremos.
Sencillo ¿no? 😉
Y…. eso es todo por hoy.
Espero vuestros comentarios.
Un saludo.
Índice – <– Capítulo Anterior
