Menu

Google Maps + Geocoder

mapsionic2native - March 07, 2017 por Levano Carlos

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.

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

Aquí enseña a como colocar un marcador en nuestro mapa: Google Maps Markers

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 --v2

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 platform add android

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

ionic plugin add cordova-plugin-geolocation --save
ionic plugin add cordova-plugin-x-toast
ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE"

Nota: Tenemos que colocar en YOUR_ANDROID_API_KEY_IS_HERE nuestro ApiKey que habíamos generado

5.- 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 en su post anterior sobre Google Maps Markers, 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, 
  GoogleMap, 
  GoogleMapsEvent, 
  GoogleMapsLatLng, 
  GoogleMapsMarker, 
  GoogleMapsMarkerOptions, 
  Toast
} from 'ionic-native';

Y cambiemoslo a esto:

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

En una parte de nuestro código tenemos esto:

this.map.addMarker(markerOptions)
.then((marker: GoogleMapsMarker) => {
    marker.showInfoWindow();
});

Y cambiemoslo a esto:

this.map.addMarker(markerOptions)
.then((marker: GoogleMapsMarker) => {

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

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

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

Resultado:


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: Levano Carlos