Google Maps + Geocoder

July 03, 2017

Tengan ustedes un excelente día, en esta ocasión les traigo un nuevo artículo, pero esta vez un artículo con respecto a GEOCODER, existen dos formas:

  • Geocodificación: Es el proceso de convertir direcciones en coordenadas geográficas que puedes usarlas para disponer marcadores en un mapa o posicionar el mapa.
  • Geocodificación Inversa: Es el proceso de convertir coordenadas geográficas en direcciones en lenguaje natural.

La anterior información se sacó de la web de google-maps{:target=“_blank”}.

Ionic Push Notifications

Antes de iniciar recomiendo haber leído estos artículos de nuestros compañeros.

Aquí enseña cómo obtener el ApiKey: Google Maps Native{:target=“_blank”}

Aquí enseña a como colocar un marcador en nuestro mapa: Google Maps Markers{:target=“_blank”}

Entonces ya teniendo el concepto claro y de haber leído los artículos anteriores, vamos a proceder a realizar nuestro proyecto de ejemplo.

Pasos

1.- Abrimos nuestra terminal y ejecutamos esto (para crear un nuevo proyecto)

ionic start geocoder blank --cordova

2.- Una vez que ya nos creó el proyecto, ingresamos haciendo esto:

cd geocoder 

3.- Añadimos la plataforma que vamos a usar, en este caso es android y colocamos esto en la terminal:

ionic cordova platform add android

4.- Ahora que hemos agregado la plataforma podemos hacer uso de Ionic Native{:target=“_blank”}, para incluir a Geolocation, GoogleMaps, y Toast sólo tenemos que hacer esto:

Geolocation

ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="The app need the geolocation"
npm install @ionic-native/geolocation --save

Google Maps Nativo

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: Tenemos que colocar en YOURANDROIDAPIKEYIS_HERE nuestro ApiKey que habíamos generado

Toast

ionic cordova plugin add cordova-plugin-x-toast
npm install @ionic-native/toast --save

5.- Ahora debemos importar los servicios de Geolocation, GoogleMaps, Geocoder y Toast en el array de providers en el archivo src/app/app.module.ts, así:

...
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMaps, Geocoder } from '@ionic-native/google-maps';
import { Toast } from '@ionic-native/toast';
...

@NgModule({
  declarations: [...],
  imports: [...],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    ...
    Geolocation,
    GoogleMaps,
    Geocoder,
    Toast
    ...
  ]
})
export class AppModule {}

6.- Ahora tenemos que abrir el proyecto con un editor, para ionic, uso Visual Studio Code, en la terminal si usas visualStudioCode simplemente haz esto:

code .

6 .- Copiamos el script que realizó Mayra Rodriguez{:target=”blank”} en su post anterior sobre Google Maps Markers{:target=”blank”}, ya lo tienes copiado verdad?.

Ok, quiero creer que es así, entonces tenemos que modificar las importaciones de ionic-native.

Teníamos esto:

import { Geolocation } from '@ionic-native/geolocation';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  CameraPosition,
  MarkerOptions
} from '@ionic-native/google-maps';

Y cambiemoslo a esto:

import { Geolocation } from '@ionic-native/geolocation';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  CameraPosition,
  MarkerOptions,
  Geocoder, 
  GeocoderRequest, 
  GeocoderResult,
} from '@ionic-native/google-maps';
import { Toast } from '@ionic-native/toast';

En una parte de nuestro código tenemos esto:

addMarker(options){
  let markerOptions: MarkerOptions = {
    position: new LatLng(options.position.latitude, options.position.longitude),
    title: options.title,
    icon: options.icon
  };
  this.map.addMarker(markerOptions);
}

Y cambiemoslo a esto:

addMarker(options){
  let markerOptions: MarkerOptions = {
    position: new LatLng(options.position.latitude, options.position.longitude),
    title: options.title,
    icon: options.icon
  };
  this.map.addMarker(markerOptions)
  .then(marker =>{
    this.doGeocode(marker);
  })
}

La función doGeocode, que es la que se encarga de convertir coordenadas geográficas en direcciones, será así:

doGeocode(marker){
  let request: GeocoderRequest = {
    position: new LatLng(this.myPosition.latitude, this.myPosition.longitude),
  };
  this.geocoder.geocode(request)
  .then((results: GeocoderResult) => {
    let address = [
      (results[0].thoroughfare || "") + " " + (results[0].subThoroughfare || ""),
      results[0].locality
    ].join(", ");
    console.log("data_: ", address);
    marker.setTitle(address);
    marker.showInfoWindow();
  });
}

8.- La clase completa finalmente quedará así:

import { Component} from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';

import { Geolocation } from '@ionic-native/geolocation';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  CameraPosition,
  MarkerOptions,
  Geocoder, 
  GeocoderRequest, 
  GeocoderResult,
} from '@ionic-native/google-maps';
import { Toast } from '@ionic-native/toast';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  map: GoogleMap;
  myPosition: any = {};
 
  constructor(
    private navCtrl: NavController,
    private geolocation: Geolocation,
    private googleMaps: GoogleMaps,
    private geocoder: Geocoder,
    private toast: Toast
  ) {}

  ionViewDidLoad(){
    this.getCurrentPosition();
  }

  getCurrentPosition(){
    this.geolocation.getCurrentPosition()
    .then(position => {
      this.myPosition = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
      this.loadMap();
    })
    .catch(error=>{
      console.log(error–);
      //this.toast.show("No se ha podido obtener su ubicación", '5000', 'center')
      //.subscribe(toast => console.log(toast) );
    })
  }

  loadMap(){
    // create a new map by passing HTMLElement
    let element: HTMLElement = document.getElementById('map');

    this.map = this.googleMaps.create(element);

    // create CameraPosition
    let position: CameraPosition = {
      target: new LatLng(this.myPosition.latitude, this.myPosition.longitude),
      zoom: 12,
      tilt: 30
    };

    this.map.one(GoogleMapsEvent.MAP_READY).then(()=>{
      console.log('Map is ready!');

      // move the map's camera to position
      this.map.moveCamera(position);

      let markerOptions: MarkerOptions = {
        position: this.myPosition,
        title: "Hello"
      };

      this.addMarker(markerOptions);
    });
  }

  addMarker(options){
    let markerOptions: MarkerOptions = {
      position: new LatLng(options.position.latitude, options.position.longitude),
      title: options.title,
      icon: options.icon
    };
    this.map.addMarker(markerOptions)
    .then(marker =>{
      this.doGeocode(marker);
    })
  }

  doGeocode(marker){
    let request: GeocoderRequest = {
      position: new LatLng(this.myPosition.latitude, this.myPosition.longitude),
    };
    this.geocoder.geocode(request)
    .then((results: GeocoderResult) => {
      let address = [
        (results[0].thoroughfare || "") + " " + (results[0].subThoroughfare || ""),
        results[0].locality
      ].join(", ");
      console.log("data_: ", address);
      marker.setTitle(address);
      marker.showInfoWindow();
    });
  }
}

9.- Ya tenemos todo listo, ahora tenemos que construir el App e instalarlo en nuestro celular. Hacemos esto:

ionic cordova build android --prod
ionic cordova run android --prod

Resultado: