TUTORIAL

Jose Jesus Perez Rivas
Autor: Jose Jesus Perez Rivas
Publicado el 19 - feb - 2017

Cómo abrir una ruta en Google Map desde PhoneGap

Hace unas horas he estado revisando algunas dudas del foro de la comunidad y me he encontrado con una duda interesante, cómo se podría abrir la aplicación de “Google Map” desde una aplicación “PhoneGap” asignando directamente una localización.

Bien, esto me ha llevado a generar este pequeño tutorial con el que explicar como podemos abrir la aplicación de “Google Map”, asignarle unas coordenadas de inicio y unas coordenadas de fin y de este modo generar una ruta de viaje de forma directa y con una sola función javascript :)

moviles-phonegap-google-map

1.- Añadir el plugin “phonegap-launch-navigator” a nuestro proyecto.
Para ello vamos a necesitar primero de todo añadir el plugin “phonegap-launch-navigator” del desarrollador “Dave Alden“.

En de que compilemos en local necesitamos añadir el plugin de la siguiente manera:

1.  phonegap plugin add uk.co.workingedge.phonegap.plugin.launchnavigator

Si compilamos con PhoneGap Build, lo debemos añadiremos incluyendo la siguiente línea de código en el archivo “config.xml” de nuestro proyecto:

1.  <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" source="npm" />

2.- Crearnos una función JavaScript para abrir Google Map y la añadimos, por ejemplo, a nuestro archivo index.js

En mi caso lo he tomado como referencias dos localizaciones de la ciudad de Sevilla, y he obtenido las coordenadas de estas dos localizaciones en latitud y longitud.

La siguiente función comprobamos si la app el usuario tiene instala la app “Google Map”, la asignamos como appp/navegador predeterminado, y asignamos las coordenadas de salida y llegada para que la aplicación de Google cree la ruta de forma automática.

 Code: arbitrary (select
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

function launchGoogleMap(){
  
    launchnavigator.isAppAvailable(launchnavigator.APP.GOOGLE_MAPS, function(isAvailable){
        var navigator;
        if(isAvailable){
            navigator = launchnavigator.APP.GOOGLE_MAPS;
        }else{
            console.log("Google Maps not available - falling back to user selection");
            navigator = launchnavigator.APP.USER_SELECT;
        }
        launchnavigator.navigate([37.3753501, -6.0250983], {
            app: navigator,
            start: "37.3682562, -6.0096488"
        });

    });

}

3.- Creamos un botón que lance la función anterior y por ejemplo, lo añadimos a nuestro archivo index.html.
1.  <button onclick="launchGoogleMap()">Launch Google Map</button>

Espero os guste el tutorial y os sea de ayuda, si tenéis dudas podéis ponerlas en el foro de la comunidad!

Saludos a tod@s :)

3 Respuestas.

  1. education advice…

    What’s up mates, its impressive paragraph regarding educationand fully explained, keep it up all the time….

  2. education sites…

    I couldn’t resist commenting. Well written!…

  3. Muy buen tutorial.
    He seguido todo al pie de la letra, pero con ios tengo un error, cuando activo la función esta solo se activa cuando oprimo el boton de inicio del iphone. Como lo soluciono? Estoy usando Ionic.

    Muchas gracias

Deja tu comentario

Debes estarlogueado para comentar.