Menu

Google Maps con Markers

mapsdemosionic2 - October 19, 2016 por Mayra Rodríguez
ionic2.0.0

Ya hemos visto en los posts anteriores sobre cómo integrar Google Maps con nuestra aplicación en Ionic 2, bien sea de forma nativa o con javascript. En este post veremos un poco más sobre la integración de Google Maps con Ionic 2 y es sobre el tema de los Markers.

Los Markers nos permiten identificar un lugar en el mapa siempre y cuando tengamos las coordenadas geográficas, por defecto Google Maps trae un icono de color rojo que muchos seguramente conocen, sin embargo podemos personalizarlo, lo cual es sorprendentemente sencillo e increiblemente util.

1. Creación del proyecto

ionic start gm-markers blank --v2

2. Instalación de los Plugins de Cordova y de las Api keys de Android y iOS

Si te sientes un poco perdido sobre el tema de las Api keys, te invito a leer el post de Google maps native

cd gm-markers
ionic 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
ionic plugin add cordova-plugin-geolocation

3. Integración de Google Maps Nativo

Tomando en cuenta el post de Google maps native, integramos rapidamente nuestro mapa.

En home.html, debemos colocar un div con nuestro id ‘map’, o como queramos llamarlo.

1
2
3
4
5
6
7
8
9
10
11
<ion-header>
  <ion-navbar>
    <ion-title>
      Google Map
    </ion-title>
  </ion-navbar>
</ion-header>

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

En nuestro home.ts, importamos las librerias para el map, la geolocalización y las referentes al Marker

import {Geolocation, GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, 
  GoogleMapsMarkerOptions, GoogleMapsMarker, Toast} from 'ionic-native';

Dentro de la clase declaramos dos variables

map: GoogleMap;
latLng: any;

En el constructor llamamos a la función getCurrentPosition() para obtener la position del usuario.

constructor(public navCtrl: NavController, private platform: Platform) {
  platform.ready().then(() => {
      this.getCurrentPosition();
  });
}

Luego escribimos la función para obtener la localización:

getCurrentPosition(){
  Geolocation.getCurrentPosition()
    .then(position => {

      let lat = position.coords.latitude;
      let lng = position.coords.longitude;

      this.latLng = new GoogleMapsLatLng(lat, lng)

      this.loadMap();
  });
}

Así mismo escribimos la función para cargar el mapa, la cual he decido llamar loadMap()

loadMap(){
  this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
      'compass': true,
      'myLocationButton': true,
      'indoorPicker': true,
      'zoom': true,
    },
    'gestures': {
      'scroll': true,
      'tilt': true,
      'rotate': true,
      'zoom': true
    },
    'camera': {
      'latLng': this.latLng,
      'tilt': 30,
      'zoom': 15,
      'bearing': 50
    }
  });

  this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
    console.log('Map is ready!');
  });
}

Ahora ejecuta:

ionic run android ó ionic run ios 

para corroborar que funcione bien el mapa.

4 .Colocando el Marker

Una vez concluido el paso anterior colocaremos justo debajo de console.log(‘Map is ready’) la llamada a la función que mostrará nuestro marker la cual recibe el nombre de setMarker()

Esta función contendrá lo siguiente

setMarker(){
  //primero validamos que tengamos los datos de la localización
  if(this.latLng){

    //De esta forma estamos colocando el marker en la posicion de nuestra ubicación, con el titulo ‘Mi posición’
    let markerOptions: GoogleMapsMarkerOptions = {
      position: this.latLng,
      title: 'Mi posición'
    };
      
    //Luego lo agregamos al mapa, y una vez agregado llamamos la función showInfoWindow() para mostrar el título señalado anteriormente.

    this.map.addMarker(markerOptions)
      .then((marker: GoogleMapsMarker) => {
        marker.showInfoWindow();
    });
  }else{
    
    //En caso de no obtener la ubicación es bueno señalar al usuario porque no se mostró el marker
    Toast.show("No se ha podido obtener su ubicación", '5000', 'bottom').subscribe(
      toast => {
        console.log(toast);
      }
    );
  }
}

Resultado:

5 .Colocando nuestro Marker Personalizado

Para colocarle una imagen personalizada nuestro marker, basta con almacenar la imagen en la carpeta de assets ubicada en el directorio src, luego guardamos la dirección desde la raíz de nuestro proyecto en una variable:

let customMarker = "www/assets/custom-marker.png";

y agregamos icon: customMarker en los parámetros que recibe el markerOptions, de la siguiente manera:

let markerOptions: GoogleMapsMarkerOptions = {
  position: this.latLng,
  title: 'Mi posicion',
  icon: customMarker
};

Ahora ejecuta:

ionic run android ó ionic run ios 

y voila!

Enlaces de Referencia

Ver demo

Recuerda:

Si quieres ejecutar este demo un 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

npm install

Y luego

ionic state restore

esto es para descargar todas las dependencias del proyecto.


¿Quieres saber más? Suscríbete a nuestro Newsletter o únete a nuestro canal en Slack y mantente atento. Espero sea de utilidad y sigan programando :)

Por: Mayra Rodríguez

¡Compártelo!

Nunca te pierdas una Noticia.