• Author / Uploaded
• Gabriel Galetti

Citation preview

Búsqueda personalizada de Google

Todo

Hecho En

Tutoriales

Noticias

Tips

Google Maps Nativo con Ionic maps demos ionic2

- November 09, 2017 por Daniel Londoño Sanchez | Edita este Post.

ionic 3.8.0 ionic-native 4.3.3 ionic-app-scripts 3.0.1 cordova-cli 7.1.0 ionic-cli 3.16.0 cordovaplugin-googlemaps 2.1.0

j

Ver código

Hola a todos, en esta ocasión les traemos un pequeño ejemplo de cómo poder implementar Google Maps Nativo en tu proyecto de Ionic, es algo muy sencillo y de seguro que con estas bases podrás dar inicio a una gran idea.

¿Qué tal lo estamos haciendo? Tomate 10 segundos en contestar una pregunta :)

Ir a la pregunta

Actualización (08/11/2017) Hemos actualizado este demo con el último release Ionic 3.8. También funciona con la más reciente versión de cordova-plugin-googlemaps (v2.1.0) que tiene un increíble rendimiento y una excelente integración con ionic native 4.

Ver demo

Para integrar Google Maps en tu aplicación es necesario que te registres en la cuenta de Google para desarrolladores y generes el API KEY de la aplicación ya sea para android o ios, esta te permitirá trabajar con Google Maps. Aquí dejo el link para ingresar a generar la key Link

Una vez nos encontramos en la plataforma de google, es necesario que selecciones la tecnología con la cual se integrará Google Maps, para este ejemplo lo trabajaremos para la plataforma Android. Al seleccionar la plataforma nos aparecerá una serie de textos los cuales nos explican sobre Google Maps (esto lo puedes leer para que te enteres de todo lo que google tiene para nosotros trabajar con mapas), en este paso vamos a dar click en la parte superior de la ventana sobre costado derecho en el botón “Obtener una clave”.

En la ventana que se nos abre, nos dirigimos a seleccionar la opción “Crear proyecto” y continuar.

Continuamos digitando el nombre de nuestra aplicación para con este reconocer la clave generada por Google Maps. Yo he nombrado la app con el nombre “MapasNativo” y este será el nombre de nuestra aplicación.

Apenas tengas lista la información, puedes pulsar el botón de “Crear” para que google te genere el id de tu producto.

Copia esta clave API ya que con esta realizaremos la integración con Google Maps. El siguiente paso es crear nuestra aplicación Ionic, en este caso usare la plantilla blank que trae ionic.

d

ionic start demo111 blank --cordova

Una vez se crea el proyecto, nos dirigimos a la carpeta que ionic crea con su estructura para comenzar a integrar Google Maps en nuestra aplicación.

d

cd demo111

Luego instalamos las plataformas para las cuales queremos desarrollar:

d

ionic cordova plataform add android ionic cordova plataform add ios

Para integrar Google Maps Nativo de ionic, necesitaremos hacer uso del plugin de Google Maps . Google Maps:

d

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KE Y_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE" --save npm install @ionic-native/google-maps --save

Ahora debemos importar el servicio de GoogleMaps en el array de providers en el archivo src/app/app.module.ts , así:

e

... import { GoogleMaps } from '@ionic-native/google-maps'; ... @NgModule({ declarations: [ MyApp, ], imports: [ BrowserModule,

IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, ], providers: [ StatusBar, SplashScreen, GoogleMaps, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}

Ahora ya tenemos lo necesario para integrar mapas en nuestra aplicación, vamos a realizar la importación de las librerías referentes a los plugin que instalamos. Para esto nos dirigimos a la carpeta del proyecto creado por ionic app/page y abrimos el archivo home.ts e importamos las librerías.

e

... import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps'; @IonicPage() @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor( public navCtrl: NavController, public geolocation: Geolocation, ) { ...

Las libreriía de GoogleMaps hace parte de Ionic Native: Para este ejemplo vamos a declarar dos métodos en nuestro archivo home.ts estos se llamarán: loadMap() : Este método va a crear la instancia del mapa.

e

loadMap(){ let mapOptions: GoogleMapOptions = { camera: { target: { lat: 43.0741904, // default location lng: -89.3809802 // default location }, zoom: 18, tilt: 30 } }; this.map = this.googleMaps.create('map_canvas', mapOptions); // Wait the MAP_READY before using any methods. this.map.one(GoogleMapsEvent.MAP_READY) .then(() => { // Now you can use all methods safely. this.getPosition(); }) .catch(error =>{ console.log(error); }); }

obtenerPosicion() : Este método nos devolverá la posición actual del dispositivo en

coordenadas de latitud y longitud. Para esto debe de estar activo el servicio de GPS del dispositivo. En este método usa la misma instancia del mapa para recuperar la posición actual del dispositivo. Luego dibuja un marker.

e

getPosition(): void{ this.map.getMyLocation() .then(response => { this.map.moveCamera({ target: response.latLng }); this.map.addMarker({ title: 'My Position', icon: 'blue', animation: 'DROP', position: response.latLng }); }) .catch(error =>{ console.log(error); }); }

Es hora de aprender Ionic!. Aprende con nuestro curso. El primer mes es por nuestra cuenta :)

Me quiero unir. Finalmente toda la clase HomePage queda así:

e

import { Component } from '@angular/core'; import { IonicPage, NavController, Platform } from 'ionic-angular'; import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps'; @IonicPage() @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { map: GoogleMap; constructor( private navCtrl: NavController, private googleMaps: GoogleMaps ) {} ionViewDidLoad(){ this.loadMap(); } loadMap(){ let mapOptions: GoogleMapOptions = { camera: { target: { lat: 43.0741904, // default location lng: -89.3809802 // default location }, zoom: 18, tilt: 30 } }; this.map = this.googleMaps.create('map_canvas', mapOptions); // Wait the MAP_READY before using any methods. this.map.one(GoogleMapsEvent.MAP_READY) .then(() => {

// Now you can use all methods safely. this.getPosition(); }) .catch(error =>{ console.log(error); }); } getPosition(): void{ this.map.getMyLocation() .then(response => { this.map.moveCamera({ target: response.latLng }); this.map.addMarker({ title: 'My Position', icon: 'blue', animation: 'DROP', position: response.latLng }); }) .catch(error =>{ console.log(error); }); } }

Ahora vamos a abrir el archivo home.html y vamos a incluir un div con un id=”map_canvas” .

x



Demo 111





Ahora vamos a nuestro archivo home.scss e incluiremos el siguiente código.

l

page-home { #map_canvas{ display: block; height: 100%; width: 100%; } }

Ya con esto debería de quedar todo listo. Ahora vamos a compilar nuestro proyecto y realizaremos una prueba.

d

ionic cordova run

android --prod

NOTA: Recuerda activar el acceso a mapas de la aplicación por la con guración del celular en aplicaciones.

Resultados de la aplicación:

j

Ver código

Recuerda: Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

d

npm install

esto es para descargar todas las dependencias del proyecto. Te ha gustado el Post? No te olvides dejarnos una Cali cación en Facebook y darle Like al Facebook Page. Espero sea de utilidad y sigan programando :) Por: Daniel Londoño Sanchez

¡Compártelo!

Artículos relacionados:

Background Geolocation

Google Maps JS + Ionic en 5 pasos

Trazando rutas con Google Maps JS + Ionic

r

Únete a nuestra comunidad Únete a nuestro canal de slack y podras interactuar con toda la comunidad hispana en ionic. Unete

Somos un pequeño pedazo del Internet empoderado por la Comunidad de Ionic en Español. Aprende a crear apps con HTML, CSS y Javascript con nuestros Tutoriales, Libro, Slack y Publicaciones. Inicio Cursos Autores Podcast Codigo de Conducta

i k r m w