Googlemaps en phonegap

Googlemaps en Phonegap

En este tutorial vamos a ver cómo añadir googlemaps en phonegap, para ello vamos a utilizar este plugin.

¿Porqué utilizar un plugin y no la api de googlemaps directamente?, simplemente porque con él tenemos todas las funcionalidades necesarias. No tenemos que preocuparnos por incluir archivos, tampoco por los eventos, el almacenamiento en caché, la imagen de los iconos o eliminar los objetos, de todo se encarga el plugin, nosotros sólo tenemos que utilizarlo.

Nosotros para este ejemplo vamos a hacer la instalación para windows, debemos seguir los siguientes pasos.

Crea tu proyecto de la siguiente forma:


Ahora debemos obtener la huella digital del certificado de depuración, para esto haz lo siguiente.


Una vez lo hagas verás una linea que pone SHA1: y el certificado, lo copias al portapapeles porque te hará falta.

Obtener la API KEY para Android

  • Ves a la consola de google.
  • Registra tu proyecto.
  • Activa Google Maps Android API v2.
  • Pulsa en APIS y Autenticación y en credenciales.
  • En el popup pulsa en crear clave de android.
  • Añade tu SHA1 seguido de un punto y coma con el nombre de tu app, com.example en este caso.
  • En la siguiente pantalla coge el API KEY.

Instalar el plugin Google Maps para Android

Ponte de nuevo en la raíz de tu proyecto y ejecuta la siguiente línea, reemplazando el texto YOUR_API_KEY_IS_HERE por tu api key.


Ahora abre tu proyecto con tu editor preferido y busca el AndroidManifest.xml en platforms/android y añade las siguientes líneas para tener permisos.


Finalmente, abre tu archivo index.html y reemplaza el código existente por el siguiente.


Sólo necesitas compilar tu aplicación e instalarla en tu emulador o dispositivo.


Ahora deberías ver algo como lo siguiente.

embed_map

Cómo todos los tutoriales, está probado y testeado en android y funciona perfectamente, si tienes algún problema revisa los pasos antes de decir que no funciona.

Espero que te sirva y te guste, saludos.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
No te pierdas los últimos cursos y las nuevas promociones de CursosdesarrollowebACCEDER AHORA
+ +