viernes, 27 de abril de 2018

Integrando Google maps con Ionic





Hola amigos en esta ocasión vengo a compartir con ustedes una de las muchas maneras que existen para integran google maps a nuestras aplicaciones en Ionic.



1. Primero crearemos nuestro proyecto en ionic


ionic start mapas blank

2. Agregamos nuestro plugin nativo de geolocalización de ionic


ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
npm install --save @ionic-native/geolocation


3.Ahora debemos importar el servicio de Geolocation en el array de providers en el archivo src/app/app.module.ts, así:
...
import { Geolocation } from '@ionic-native/geolocation';
...

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}


4. Ahora procedemos a integrar sdk de Google maps , para ello debemos realizar dos pasos:

  • Generar el api key para tener autorización para el uso de google maps para ello nos vamos al sitio oficial de este.




  • Ahora procederemos a importar el sdk en nuestro archivo index.html que se encuentra la carpeta src y luego de llamar a build/polyfills.js,como pueden observar en la importación debemos cambiar la parte que dice "YOUR KEY" por tu clave generada anteriormente




5. Ahora procederemos a crear nuestro primer mapa en nuestra aplicación, para ello abrimos el archivo llamado home.ts ubicado en app/page. En este archivo al igual que hicimos en el app.module.ts procedemos a realizar a importación de el plugin nativo de ionic para la geolocalización, asi mismo realizamos la  importación de los siguientes elementos: ViewChild, ElementRef , que nos permitiran trabajar los elementos creados en el DOM añadido a esto realizaremos la declaración de dos variables llamada map y google que serán las que nos serviran para realizar el renderizado del mapa:
...
import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import { Component, ViewChild, ElementRef } from '@angular/core';

//Esta variable nos permitira acceder al api de google maps y manejar funciones propias de este
declare var google; 

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  //Estamos usando el decorador @ViewChild para referenciar a 
   // un elemento del DOM en este caso al div con el id #map
  @ViewChild('map') mapElement: ElementRef;
  constructor(
    private navCtrl: NavController,
    private geolocation: Geolocation
  ) {}

}
...

6. Creando mapa y estilos del mapa:


  • Definiendo vista: para ello abrimos el archivo llamado home.html y lo estructuramos de la siguiente manera:


<ion-header>
  <ion-navbar color="primary"> 
     <ion-title> Google Maps </ion-title> 
 </ion-navbar>
 </ion-header>
<ion-content>
 <div id="map"></div> 
</ion-content>



  • Definiendo los estilos: para ello abrimos nuestro archivo home.scss y lo estructuramos de la siguiente manera:

.ios, .md {
    home-page {
        #map {
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 150ms ease-in;
            display: block;
        }
    }
}

7. Para crear nuestro mapa vamos a hacer uso de 2 metodos:


  •  getPosition: Método que nos permitirá obtener nuestra posición haciendo uso del plugin nativo de google maps de ionic

 getPosition():any{
    //HACIENDO USO DE LA VARIABLE GEOLOCATION PROPIA DEL PLUGIN NATIVO DE IONIC USAREMOS EL METODO GETCURRENTPOSITION, METODO
    // QUE NOS DEVUELVE NUESTRA POSICIÓN ACTUAL
    this.geolocation.getCurrentPosition()
    .then(data => {
      //UNA VEZ OBTENIDA NUESTRA POSICIÓN RETORNAMOS LA DATA OBTENIDA  
      return data;
    })
    .catch(error =>{
      console.log(error);
    })
  }


  • initMap: Método que nos permitirá renderizar nuestro mapa haciendo uso de el sdk de google maps.

initMap(){
    //Creamos una variable llamada position la cual almacenara nuestra posición geografica actual obtenida en nuestra función anteriormente explicada:
    let position=this.getPosition()
    let latitude = position.coords.latitude; //Guardamos la latitud de nuestra posición en una variable
    let longitude = position.coords.longitude; //Guardamos la latitud de nuestra posición en una variable
    console.log(latitude, longitude);
    

    // creamos un objeto que nos guarda nuestra posición geografica
    let myLatLng = {lat: latitude, lng: longitude};

    // Definimos las características de nuestro mapa
      let mapOptions = {
        center: latLng,
        zoom: 15,
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      //Renderizamos nuestro mapa
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    });


8. Para finalizar basta con ejecutar la función initMap dentro del método ionViewDidLoad, para los que no tienen conocimiento el método ionViewDidLoad es un método que pertenece al ciclo de vida de ionic y permite ejecutar instrucciones una vez se hallan cargado los elementos básicos de ionic.


ionViewDidLoad(){
    this.initMap();
  }


Hecho esto deberíamos obtener un hermoso mapa similar a este:



Bueno espero que les halla servido y será hasta la próxima ocasión.
banner
Latest
Next Post

Hola, me llamo Andrés.Soy egresado de la carrera de Ingeniería Informática en la Universidad Nacional de Trujillo (Perú).Me considero autodidacta de corazón ,amante del mundo de la programación, software libre y hacking ético

0 comentarios: