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