Google Maps Ionic – Con ejemplos claros y sencillos

Google Maps Ionic – Con ejemplos claros y sencillos
5 (100%) 2 votes

En el capítulo de hoy vamos a hablar sobre una de las apis más utilizadas de Google dentro de las aplicaciones. Se trata de Google Maps Ionic. Con este componente vamos a poder, a parte de mostrar un mapa, geolocalizar a los usuarios, localizar calles por coordenadas y viceversa y muchas otras cositas que veremos a continuación ¿Te quedas conmigo? Intentaré darle un enfoque constructivo y aportando el máximo valor posible.

Nota: Este componente funciona tanto para Ionic 2, Ionic 3 y Ionic 4 de la manera que lo vamos a ver en este artículo. Si estás interesado en el de Ionic 1 lo siento, este artículo no es para tí.

Google maps Ionic

Eyyyy! Inteligente lector y guapa lectora, muy buenos días. Como has podido ver en el párrafo de presentación, hoy vamos a hablar de una de las apis que más furor causa entre los desarrolladores y que muchas empresas usan para poder tratar con datos de localizacióin de nuestros usuarios. Se trata de la api de Google Maps para Ionic.

Como sabrás, estos días he estado sin subir nada al blog porque he estado de vacaciones. He intentado muchas veces ponerme a los mandos del blog, pero es que estando de libre es un poco complicado, no porque no quisiera escribir, si no por falta de tiempo. Un día aquí, otro allí, vamos un puto caos…

Pero bueno, ya estamos a full de nuevo, a seguir con la marcha y con las pilas súper cargadas para darlo todo. Venga, comencemos con lo que interesa, con Ionic native Google Maps.

 

Integración actual

Ha día de escribir este artículo, 11 de Julio de 2018, hemos probado la integración de la api del Framework en Ionic 3.8 junto con el plugin de cordova necesario para poder acceder a la parte nativa, ordova-plugin-googlemaps (v2.1.0). Hemos comprobado que tiene un rendimiento espectacular junto con Ionic Native 4.

Para todo el que quiera revisar el funcionamiento actual aquí te dejo una demo que nada más que es bajar, instalar paquetes, poner nuestra api key y rular en el móvil la app terminada:

https://github.com/ion-book/demo111

Si aún no tienes esta key tendrás que regístrate en el siguiente link con tu cuenta de google y seguir los pasos necesarios hasta tenerla en nuestras manos:

https://cloud.google.com/maps-platform/?hl=es-419.

Una vez que ya estás registrado tendrás que seleccionar la plataforma para que la vas a usar la api. Y seguir los pasos que se muestran a continuación, es muy sencillo e intuitivo.

 

Instalar Ionic Google Maps en nuestro proyecto Ionic

Para poder hacer uso de la api tendremos que instalar el plugin de Cordova que nos permite acceder a los componentes nativos e instalar en controlador de Ionic que nos permite comunicarnos sobre la capa intermedia. Para hacerlo vamos a hacer lo siguiente:

 

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE" --save

npm install @ionic-native/google-maps --save

 

Nota: Con has visto, el comando que hemos ejecutado nos permite poner la API KEY de Google Maps para Ionic tanto para IOS como para Android. En caso de que lo queramos hacer sin poner la API KEY también lo podremos hacer más adelantes. Simplemente deja lo siguiente:

 

ionic cordova plugin add cordova-plugin-googlemaps --save

npm install @ionic-native/google-maps --save

 

 

El siguiente paso a realizar sería, como hacemos siempre, importar el módulo en nuestro AppModule de la siguiente manera:

 

...
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 {}

 

 

Ale, ya podemos hacer uso del componente inyectándolo en los constructores de nuestros componentes.

Muchos sabréis ya como se hace, otros mucho no, pero para estos segundos os dejo un ejemplo:

 

...

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,
  ) {

...

 

 

Como habrás podido ver, en los import, he importado todos los componentes de la api Ionic Maps. Esto no es necesario pero lo he visto oportuno para enseñar cuales son los que podemos utilizar de manera directa.

En los casos finales solo necesitaremos importar lo que vayamos a usar, no importe todo. Más que nada por el principio de Codificación que dicta una buena conducta de codificación importando solo lo necesario en versiones realease.

Una cosa más, aunque quizás no viene demasiado a cuento, también puedes utilizar esta api bajo Angular para la web con ligeras modificaciones. Más adelante, cuando hagamos el curso de Angular, especificaré como lo podemos usar. Pero de momento, si es lo que necesitas, busca por Google que seguro que algo encuentras.

Pues hasta aquí el ejemplo de instalación de la api de Google Maps para Ionic.

Cómo se usa Google Maps en Ionic

Como nuestro caso se trata con ejemplos, que es como mejor se aprende a programar, vamos a escribir dos métodos. “loadMap()” para cargar el mapa y “findPosition()” para recuperar la localización actual de nuestro usuario. ¿Mola no? A mí, la primera vez que lo hice, me encantó. Seguro que a ti también.

 

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);
  });

}

 

 

Vale, este esta es la función, que como su propio nombre indica, se encarga de cargar el mapa.

Hemos visto, en primer lugar, las opciones con las que queremos que cargue nuestro mapa “GoogleMapsOption”. En este caso vamos a usar las más comunes, pero tiene muchas más que me gustaría que investigaras por tu cuenta.

El campo “camera” inicializa el mapa con los datos que le hemos pasado

  • Target: La posición inicial en la que queremos que se coloque la cámara sobre el mapa.
    • Lat: La latitud donde iniciará el mapa.
    • Lng: La longitud donde iniciará el mapa.
  • Zoom: Básicamente lo ceca, o lejos, que queremos que tenga la vista aérea.
  • Tilt: el zoom con el que inicia hasta que carga y se ajusta al zoom que le hemos asignado.

Continuamos con el método “create” de nuestro objeto “googleMaps”. Este es el encargado de construir todo el mapa. Como parámetro le pasaremos la estructura de datos que hemos creado anteriormente sobre la clase “GoogleMapsOption”. Esta función devolverá la instancia del mapa sobre la que podemos operar y la vamos a guardar en nuestra variable “map”.

Como usarr google Maps en Ionic

La estructura de control que han aplicado sobre esta api es un patrón de diseño controlado por eventos.

La función “on” controlará los eventos que se generen sobre nuestro map. En el caso del ejemplo hemos controlado el evento “MAP_READY” que es llamado cuando el mapa se ha terminado de construir. Es una promesa que tenemos que controlar desde el “then”, o el “catch” en caso de que falle por alguna razón. Sencillo ¿verdad?

Vale, una vez que se ha llamado a la función de “MAP_READY” vamos a llamar a la segunda función que hemos comentado al principio del punto.

 

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);
  });
}

 

 

Esta función lo que hará, es en esencia, calcular nuestra posición actual, mediante el gps del teléfono, y poner un marcador en el mapa sobre el resultado que le haya ofrecido el sistema.

La función “getMyLocation” es la encargada de recuperar los datos, y como es necesario que sea asíncrona, tenemos que controlarla con un “then” y un “catch” al tratarse de una promesa.

En la respuesta que nos llega vendrán todos estos datos. Pero en los que nos vamos a centrar ahora es en el campo “latLag” que es una clase que, en esencia, nos ahorra tener que controlar las dos variables (latitud y longitud) por separado.

MoveCamera en Ionic

Continuamos hablando de la función “moveCamera”, que como su propio nombre indica, nos permite mover la cámara a los parámetros que le pasamos. En este caso, aunque se puede hacer de otra manera, le tenemos que pasar una interface con el campo “target”. En este “target” pondremos el objeto “latLng” que nos ha llegado a través de la respuesta de la función “getMyLocation” para que la cámara se posicione encima de nuestra posición.

Después agregaremos un marcador con la función “addMarker”. Este rutina recibe como parámetros una interface que consta, aunque tiene más, con los siguientes campos:

  • Title: Será el título que aparezca cuando colocamos el dedo, o pulsamos, sobre el marcador.
  • Icon: El icono que queremos que aparezca.
  • Animation: La animación de aparición del icono.
  • Position: La posición donde queremos colocarlo.

El campo más importante, como habrás podido intuir, es el de position. Esta será la posición donde aparezca el marcador, y como en este ejemplo queremos calcular la nuestra, bastará con pasarle el campo “latLng” que nos llega de la respuesta de la función “getMyLocation”, como hemos hecho anteriormente para colocar la cámara.

Genial, pues este sería la manera de usar nuestro componente de Google Maps en TypeScript y su respetiva lógica.

Ahora veamos un poco más lo que tenemos que hacer en el HTML.

Google Maps Api HTML para Ionic

Como hemos visto en el ejemplo anterior, cuando hemos llamado al método “create” para construir nuestro mapa, le hemos pasado como primer parámetro un puntero, que hasta el momento, no habíamos visto en ningún sitio.

Pues bien, ese puntero, como podrás imaginar, es el que hace referencia al componente HTML donde queremos que se pinte el mapa.

En este caso hemos usado “map_canvas”, es el que viene por defecto en la documentación, pero podríamos haber usado cualquier otro.

También te puedo decir que el mapa se puede usar en cualquier sitio, y no solo a pantalla completa, este es otro punto bastante interesante de Ionic, dado que en Android nativo esto sería un poco más complicado de hacer. Veamos una HTML donde hacemos uso de nuestro mapa.

 

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Demo 111
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id="map_canvas"></div>
</ion-content>

 

 

Este sería el ejemplo de un posible componente normal y corriente, que de hecho si sigues los pasos hasta aquí pintarías un mapa a pantalla completa poniendo una marca sobre tu posición actual.

Pero para ello tendríamos que incluir también el siguiente código CSS:

 

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

 

Visto todo esto ya estás a disposición de usar todo como si fueras un mago, pero lo que no se aún es sí ionic 4 google maps funciona del todo correctamente. Si tienes el tiempo de probarlo te agradecería que lo hicieras y nos lo dejaras en los comentarios como te ha ido.

Una cosa más, si has seguido la guía hasta aquí, que lo probases para ver el resultado. Es flipante y motiva un montón.

 

ionic cordova run  android --prod

 

Google Maps Autocomplete para Ionic

He decidido actualizar el artículo para explicar un poco algo que me habéis consultado muchos mediante el correo electrónico. ¿Cómo podemos usar el AutoComplete para los places en G maps. Pues bien, vamos a ver primer el código y luego lo comentamos, como hacemos siempre:

 

export class HomePage {

    public latitude: number;
    public longitude: number;

    @ViewChild('map') mapElement;
    map: any;
    marker: any;
    search: string;

    constructor(public navCtrl: NavController, public platform: Platform) {
        /*platform.ready().then(() => {
        this.InitMap();
       });*/
    }

    ionViewDidLoad() {
        this.InitMap();
    }

    InitMap() {

        this.setLocation();
        let input = document.getElementById('places');
        let autocomplete = new google.maps.places.Autocomplete(input);

        google.maps.event.addListener(autocomplete, 'place_changed', () => {

            let place = autocomplete.getPlace();
            this.latitude = place.geometry.location.lat();
            this.longitude = place.geometry.location.lng();
            alert(this.latitude + ", " + this.longitude);
            console.log(place);
        });

    }

    setLocation() {

        let latLng = new google.maps.LatLng(53.550513, 9.994241);
        let mapOptions = {
            center: latLng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
        this.marker = new google.maps.Marker({
            position: latLng,
            map: this.map,
        });
    }
}

 

En primer lugar, y aunque lo veas comentado, en el constructor he metido un comentario haciendo alusión al platformReady de Ionic que se ejecuta en nuestra clase principal. Esto es para que la gente entienda cuando se ha de ejecutar todo el sistema. Si lo ponemos antes, fallará.

Para este fin, y darle un prinper empujón al mapa lo he decidido meter en el ionViewDidLoaded que se ejecutará cuando la vista que hemos vinculado en el componente entre a escena.

El trozo de código que de verdad nos interesa, el resto es ejemplo, es este:

 

let input = document.getElementById('places');
let autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', () => {
    let place = autocomplete.getPlace();
    this.latitude = place.geometry.location.lat();
    this.longitude = place.geometry.location.lng();
    alert(this.latitude + ", " + this.longitude);
    console.log(place);
});

Donde el “places” es nuestro input text donde queremos escribir la dirección para que se autocomplete.

Ahora simplemente queda probarlo, y verás lo bien que funciona. Si tienes cualquier problema ya sabes, ponte en contacto conmigo y lo vemos.

 

Como podemos pegar un listener en el mapa

Otra de la razones por las que pongo esto aquí, es por que me habéis consultado también como podemos hacer esto por la redes sociales. Aunque esté especificado en la api oficial, cabe lugar a confusión si no entendemos del todo bien como funciona. Vamos a ver un ejemplo:

 

import {NgZone} from @angular/core

//Inyectamos el ngZone en el constructor
 constructor(public navCtrl: NavController,private ngZOne:NgZone) {}
 //....

 //Pegamos el listener para que ponga un marcador donde hacemos click.
 google.maps.event.addListener(marker, 'click', () => {
  //Call run function to set the data within angular zone to trigger change detection.
  this.ngZone.run(()=>{
     this.name = marker.title;
     infoWindow.open(this.map, marker)
  });
})

 

Olvidate de todo a excepción de: google.maps.event.addlistener. Esta es la función que nos permitirá pegar un oyente sobre el mapa para poder ejecutar los eventos que nosotros queramos.

Los eventos que tenemos disponibles para ejecutar son los siguientes:

  • 'click'
  • 'dblclick'
  • 'mouseup'
  • 'mousedown'
  • 'mouseover'
  • 'mouseout'

Y para usarlos basta con que hagamos lo siguiente:

marker.addListener('click', function() {
  map.setZoom(8);
  map.setCenter(marker.getPosition());
});

Super sencillo, ¿verdad? Ahora es hora de que lo pongas en práctica.

Y para los más ganduletes, una explicación en vídeo

 

Bueno compañero esto ha sido todo por hoy. Como siempre, espero haberte ayudado a seguir con tus desarrollos y que nos veamos lo antes posible por aquí.

Un saludito y hasta el siguiente artículo.

 

Comparte esto en: