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

 

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.

Tabla de contenidos

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

Un saludo, y si a煤n no lo has hecho no olvides suscribirte a mi blog para no perderte los pr贸ximos posts 聽:-),

Tambi茅n puedes seguirme en Twitter en 鈥嶡revigames y no olvides que me ayudas mucho聽si compartes este post en las redes sociales.

7 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

  2. 1.- Mil gracias por compartir tu conocimiento y tiempo.
    2.- Quisiera complementar un poco el codigo, ya que en un incio tambi茅n tuve errores, posteriormente en un tutorial me recordaron algunas clases de escuela, y es ingresar:

    “aqu铆 va el c贸digo java, sin comillas” y queda de la siguiente manera:

    showMap=function(q)
    {
    var device = navigator.userAgent;
    var url = ‘http://maps.google.com?daddr=’+qf (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;
    }

    Adicionalmente esto va en el donde quieras que aparezca .

    Mostrar mapa

    Reitero mi agradecimiento y gracias a personas como T脷, (heroes sin capa) hacen que la MATRIX (internet) sea una red de conocimiento.

  3. Soy muy novato en la programacion para Moviles. Una forma rapida que encontre es a traves de APP Inventor. Genere una sencilla aoplicacion que lo unico que hace es cargar el objeto Webviewer y con el paginas WEB (php)… Existe forma de generar algun link en esas paginas PHP para que el objeto Webviewer abra el Navegador Nativo de Android?
    Con LINK Me da error de formato y no carga el Navegador Nativo

    Muchas Gracias

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.