Abrir mapa nativo en iOS, Android y Windows Phone desde un link

alojamiento wordpress

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

P.D: Podeis probar mis últimos juegos para móviles. Si ponéis una valoración en alguno me haceis un favor 😉

ico_beheading_androidico_beheading_iosico_beheading_wpGalactic InsectsGalactic InsectsGalactic InsectsSnow SoccerSnow Soccer

alojamiento wordpress

2 comentarios en “Abrir mapa nativo en iOS, Android y Windows Phone desde un link

  1. Hola, Utilizo tu codigo pero no me funciona
    Me da el mensaje de net::ERR_UNKNOWN_URL_SCHEME
    Estoy utilizando una funcion que hace lo siguiente:
    mapLink=’geo:0,0?q=’+localidad+” “+direccionTemp;

    window.location.href = mapLink;

    no se si me puedes ayudar.
    gracias de antemano

    1. Hola Aleks, el código que indicas solo sería válido para Android, si es ese el caso revisa que la url esté bien formada.
      Te aconsejo que utilices la función showMap que muestro al final del post para abrir la url en el formato adecuado dependiendo del dispositivo.

      Un saludo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s