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 :)

2 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!…

Deja tu comentario

Debes estarlogueado para comentar.