Tutorial de Ionic – Crear una aplicaci贸n para guardar nuestros sitios geolocalizados – Parte 2: Mostrando el mapa.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

Hola a todos:

En el post anterior creamos una aplicaci贸n con tres tabs y vimos como navegar entre ellas.
Hoy vamos a seguir construyendo la aplicaci贸n.Lo siguiente que vamos a hacer es mostrar un mapa en la p谩gina de inicio centrado en las coordenadas actuales donde nos encontremos.

Lo primero que vamos a necesitar es cagar la librer铆a de Google maps , si quieres saber m谩s sobre la api de google maps聽puedes consultar este tutorial.

Editamos el archivo index.html聽que es la plantilla principal que se carga al iniciar la aplicaci贸n聽y a帽adimos la siguiente linea antes de 聽cargar el script 聽build/main.js:

<script src="https://maps.google.com/maps/api/js"></script>

El c贸digo completo quedar铆a as铆:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
聽聽
聽聽聽聽if ('serviceWorker' in navigator) {
聽聽聽聽聽聽navigator.serviceWorker.register('service-worker.js')
聽聽聽聽聽聽聽聽.then(() => console.log('service worker installed'))
聽聽聽聽聽聽聽聽.catch(err => console.log('Error', err));
聽聽聽聽}
聽聽-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

   <script  src="https://maps.google.com/maps/api/js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

Como vemos esta el la p谩gina principal donde se va a cargar todo el contenido de la app dentro de <ion-app></ion-app> que es componente raid de la aplicaci贸n.

Ahora para poder acceder a las coordenadas del m贸vil entra en juego ionic native.

Con ionic native lo que hacemos es instalar un plugin que nos da acceso a alguna caracter铆stica nativa del m贸vil como la c谩mara, el gps, la br煤jula etc a trav茅s de typescript sin tener que programar nosotros en c贸digo nativo (Java para Android, Swift o objetive c para iOS).

Simplemente instalamos el plugin y luego importamos el plugin de ionic-native.

En la documentaci贸n de ionic 聽podemos ver todos los plugins disponibles en ionic native:

http://ionicframework.com/docs/v2/native/

En esta ocasi贸n necesitamos el plugin聽cordova-plugin-geolocation.
Este plugin proporciona informaci贸n sobre la ubicaci贸n del dispositivo, tales como la latitud y la longitud.

Para instalarlo desde el terminar dentro de la carpeta de nuestro proyecto tenemos que ejecutar los聽siguientes comandos:

ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="La app necesita geolocalizaci贸n"
npm install @ionic-native/geolocation --save

Nos sacar谩 un mensaje diciendo que falta instalar el plugin @ionic/cli-plugin-cordova y nos preguntar谩 si queremos instalarlo, le decimos que si.

Si est谩s utilizando Linux o Mac y te sale un error al intentar instalar el plugin prueba a ejecutar el comando con sudo por delante.

Si os muestra un warning como este:

npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.

Pode铆s solucionarlo escribiendo el siguiente comando:

npm install ajv@latest

Antes de nada debemos declarar el plugin como provider en el archivo app.module.ts, para ello editamos dicho archivo, importamos el plugin Geolocation y lo a帽adimos en la secci贸n providers:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Geolocation } from '@ionic-native/geolocation';


import { MyApp } from './app.component';


@NgModule({
  declarations: [
    MyApp,

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

Bien, ahora vamos a importar el plugin en el controlador de la p谩gina inicio, para ello dentro de la carpeta pages/inicio editamos el archivo inicio.ts聽e importamos el plugin Geolocation de ionic-native.
Tambi茅n vamos a聽importar聽Platform 聽desde ionic-angular para poder acceder al evento ready de Platform聽que se lanza cuando la aplicaci贸n se ha cargado completamente y esta lista. Esto nos evita errores al intentar llamar a un plugin antes de que se haya cargado.

Para importar estos dos m贸dulos incluimos las siguientes lineas en los imports:

import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

Ahora cuando la aplicaci贸n est茅 completamente cargada y lista (con el evento ready de Platform) vamos a obtener las coordenadas donde nos encontramos y mostrar un mapa centrado en las coordenadas actuales.

Creamos una variable miembro llamada map del tipo any (admite cualquier valor) que contendr谩 el manejador del mapa de google.
Despu茅s para poder utilizar Platform tenemos que inyectarlo como dependencia en el constructor de la clase, tambi茅n debemos inyectar Geolocation en el constructor. En el evento ready de Platform llamaremos a una funci贸n聽que vamos a llamar obtenerPosicion. En estos momentos el c贸digo de inicio.ts deber铆a quedarnos as铆:

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

import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';


/*
聽聽Generated class for the Inicio page.

聽聽See http://ionicframework.com/docs/v2/components/#navigation for more info on
聽聽Ionic pages and navigation.
*/
@IonicPage()
@Component({
  selector: 'page-inicio',
  templateUrl: 'inicio.html'
})
export class InicioPage {

  map: any; // Manejador del mapa.

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
   public  platform: Platform,
   private geolocation: Geolocation){

     platform.ready().then(() => {
      // La plataforma esta lista y ya tenemos acceso a los plugins.
        this.obtenerPosicion();
     });

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad InicioPage');
  }

}

Hagamos un peque帽o par茅ntesis en nuestra app para hablar de un par de conceptos que vamos a utilizar con frecuencia en nuestros desarrollos con ionic 2:

Promesas

Vemos que dentro del constructor lamamos al m茅todo ready()聽 de聽platform聽 y despu茅s de un punto utilizamos la palabra then(…).

Esto es lo que llamamos una promesa.

Normalmente los plugins de聽ionic-native聽nos devuelven una promesa

Las promesas las inclu铆a angular 1 pero ahora las promesas ya son nativas en EMACScript 6.

Las promesas vienen a sustituir a los callbacks. Se ejecuta la 聽funci贸n y cuando obtenemos un resultado en el then se ejecuta el c贸digo que necesitemos.

Si falla la ejecuci贸n de alguno podemos utilizar la funci贸n catch para tratar el error.

Funciones de flecha

Otra cosa que te puede resultar rara es que dentro del then en lugar de ejecutar una funci贸n al uso estamos utilizando lo que se denomina funciones de flecha o en ingl茅s (Fat Arrow functions).

La funciones con flecha permiten crear funciones an贸nimas m谩s f谩cilmente y adem谩s permiten utilizar this en el contexto actual.
Vamos a ver聽un poco m谩s en detalle esto con聽
el siguiente ejemplo:

class MiClase {
  constructor() {
    this.nombre = 'Eduardo';
    setTimeout(() => {
      // Esto imprim茅 en la consola "Eduardo" ya que en las funciones con flecha this hace referencia al contexto actual.
      console.log(this.nombre);
    });
  }
}

Esto ser铆a lo mismo que escribir lo siguiente:

class MiClase {
  constructor() {
    this.nombre = 'Eduardo';
    var _this = this;
    setTimeout(function() {
     console.log(_this.nombre);
    });
  }
}

Ahora que ya conocemos lo que son las promesas y las funciones de flecha podemos seguir con nuestra aplicaci贸n.

Antes de nada vamos a a帽adir una聽variable en en controlador 聽que vamos a vamos a llamar聽coords聽y聽en ella guardaremos un objeto con la latitud y longitud donde nos encontramos.

Por lo tanto encima del constructor de la clase despu茅s de la variable map definimos la variable coords:

...

export class Inicio {

聽聽map: any; // Manejador del mapa.
 coords : any = { lat: 0, lng: 0 }

  constructor(

...

Si el editor os marca los errores observareis que os subraya this.obtenerPosicion(), esto es evidentemente porque estamos llamando a una funci贸n que todav铆a no hemos definido.

Vamos a definir la funci贸n obtenerPosici贸n():

obtenerPosicion():any{
    this.geolocation.getCurrentPosition().then(res => {
      this.coords.lat = res.coords.latitude;
      this.coords.lng = res.coords.longitude;

      this.loadMap();
    })
    .catch(
      (error)=>{
        console.log(error);
      }
    );
  }

La funci贸n聽getCurrentPosition()聽del plugin Geolocation nos devuelve una promesa.

Como podemos observar resolvemos la promesa con una funci贸n de flecha. En la funci贸n de flecha recibimos como par谩metro el objeto res. Lo que nos interesa obtener es la longitud y latitud donde nos encontramos, estos valores est谩n en res.coords.longitude y res.coords.latitude.
Asignamos esos valores al objeto de la variable this.cords que acabamos de definir y despu茅s llamamos a la funci贸n this.loadMap()聽que a煤n no hemos creado.

Recordad que debemos de聽utilizar this聽para hacer referencia a聽las variables聽miembro y m茅todos que definamos en la clase del controlador.

Ahora deberemos crear la funci贸n loadMap聽que se encargar谩 de mostrar un mapa en la p谩gina centrado en las coordenadas que hemos recogido.

Antes de definir la funci贸n necesitamos crear el contenedor donde se va a mostrar el mapa en la vista. La librer铆a javascript de Google maps lo que hace es insertar un mapa en un div, por lo que necesitamos crear ese div en la vista y luego pas谩rselo como referencia para crear el mapa.

Editamos la vista de la p谩gina inicio, es decir el archivo inicio.html聽y a帽adimos un div dentro de ion-content 聽al que le asignamos como id “map”:

<!--
聽聽Generated template for the Inicio page.

聽聽See http://ionicframework.com/docs/v2/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Inicio</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <div id="map"></div>

</ion-content>

Ahora tenemos que asignarle un tama帽o al mapa as铆 que por primera vez vamos a editar el archivo de estilos de una p谩gina, en este caso vamos a editar el archivo inicio.scss.

La extensi贸n del archivo .scss, hace referencia a que es una archivo Sass, sus siglas hacen referencia a (Syntactically Awesome Stylesheets) algo as铆 como “Hoja de estilo sint谩cticamente impresionante”.

Sass聽es un lenguaje de hoja de estilos que extiende el css tradicional proveyendo de varios mecanismos que est谩n presentes en los lenguaje de programaci贸n. Con Sass puedes utilizar variables,聽c贸digo anidado, mixins, etc.

Ionic ya viene con Sass instalado lo que hace realmente f谩cil su utilizaci贸n. Sass es un lenguaje de script que es traducido a css. Podemos a帽adir reglas聽de estilo de igual manera que lo hacemos con css por lo que de momento para definir el tama帽o del mapa no necesitamos saber mas. Si quieres m谩s informaci贸n sobre Sass puede consultar la documentaci贸n oficial:聽http://sass-lang.com/documentation/

Veamos como tiene que quedar el archivo inicio.scss:

page-inicio {
ion-content{
聽聽聽聽#map {
聽聽聽聽聽聽width: 100%;
聽聽聽聽聽聽height: 100%;
    }
  }
}

Como podemos ver聽dentro del elemento page-inicio definimos el estilo para ion-content聽 y a su vez dentro definimos el estilo para #map al que le estamos diciendo que ocupe todo al ancho y el alto de la p谩gina, como vemos Sass nos permite anidar los elementos.

Bien, una vez hechos estos preparativos ya podemos definir la funci贸n loadMap que se encargar谩 de mostrar un mapa en la pagina centrado en las coordenadas que hemos recogido. Para que聽Typescript no de error por no reconocer la clase google cuando la llamemos desde la funci贸n que vamos a crear, vamos a declarar la variable google justo debajo de los imports con declare聽var聽google:聽any;聽. Veamos como tiene que quedar el c贸digo de聽inicio.ts聽con la variable google definida y nuestra funci贸n loadMap:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

declare var google: any;



/**
聽* Generated class for the Inicio page.
聽*
聽* See http://ionicframework.com/docs/components/#navigation for more info
聽* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
  selector: 'page-inicio',
  templateUrl: 'inicio.html',
})
export class InicioPage {

 map: any; // Manejador del mapa.
 coords : any = { lat: 0, lng: 0 }

  constructor(public navCtrl: NavController, public navParams: NavParams,private geolocation: Geolocation,public  platform: Platform) {
    platform.ready().then(() => {
      // La plataforma esta lista y ya tenemos acceso a los plugins.
        this.obtenerPosicion();
     });

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Inicio');
  }

  loadMap(){
   let mapContainer = document.getElementById('map');
    this.map = new google.maps.Map(mapContainer, {
      center: this.coords,
      zoom: 12
    });
}

 obtenerPosicion():any{
    this.geolocation.getCurrentPosition().then(res => {
      this.coords.lat = res.coords.latitude;
      this.coords.lng = res.coords.longitude;

      this.loadMap();
    })
    .catch(
      (error)=>{
        console.log(error);
      }
    );
  }
}

En la funci贸n loadMap()聽asignamos a la variable mapContainer聽el elemento div con id=”map” que hab铆amos creado en la vista y creamos un mapa con google.maps.Map聽donde le pasamos dos par谩metros, el primero es el elemento contenedor del mapa que lo hemos recogido en la variable mapContainer聽y el segundo par谩metro es un objeto donde le pasamos la configuraci贸n del mapa, en este caso le pasamos las coordenadas al par谩metro center聽y le decimos que muestre el mapa con un zoom de 12.

En este punto si probamos nuestra aplicaci贸n en el navegador con ionic serve -l deber铆amos ver algo como esto:

Pantalla de Inicio con nuestro mapa
Pantalla de Inicio con nuestro mapa

Para no hacer demasiado largo este post lo vamos a dejar aqu铆.

En el siguiente post seguiremos desarrollando la app, veremos como a帽adir un bot贸n FAB, como a帽adir un marcador al mapa y como crear una ventana modal y pasarle datos desde el controlador de la p谩gina que hace la llamada.

 
Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Un saludo, y si a煤n no lo has hecho no olvides suscribirte a mi blog para no perderte los pr贸ximos posts 聽:-),

Tambi茅n puedes seguirme en Twitter en 鈥嶡revigames y no olvides que me ayudas mucho聽si compartes este post en las redes sociales.

34 comentarios en “Tutorial de Ionic – Crear una aplicaci贸n para guardar nuestros sitios geolocalizados – Parte 2: Mostrando el mapa.

  1. Hola Edu, gracias de nuevo por ofrecer otra entrada sobre Ionic.
    En este caso, me salta un error en mi c贸digo, es justo al a帽adir la funci贸n loadMap, te muestro.

    loadMap(){
    let mapContainer = document.getElementById(‘map’);
    this.map = new google.maps.Map(mapContainer, {
    center: this.coords,
    zoom: 12
    });
    }

    Typescript Error
    Cannot find name ‘google’.

    Espero tu respuesta, gracias.

    1. Hola Luis,

      驴Has incluido el script de google maps en src/index.html?
      Antes de <script src=”build/main.js”></script>

      Debes a帽adir: <script src=”https://maps.google.com/maps/api/js”></script>

      Un saludo

      1. Hola Edu, as铆 es, eso lo tengo a帽adido, te muestro como est谩 mi index.html


        http://build/polyfills.js


        https://maps.google.com/maps/api/js


        http://build/main.js

        La consola al lanzar ionic serve – l me indica lo siguiente:

        [12:03:01] ionic-app-scripts 1.1.4
        [12:03:01] watch started …
        [12:03:01] build dev started …
        [12:03:01] clean started …
        [12:03:01] clean finished in 100 ms
        [12:03:01] copy started …
        [12:03:01] transpile started …
        [12:03:07] typescript: D:/WWW/Personal/NPM/misSitios/src/pages/inicio/inicio.ts
        , line: 56
        Cannot find name ‘google’.

        L55: let mapContainer = document.getElementById(‘map’);
        L56: this.map = new google.maps.Map(mapContainer, {
        L57: center: this.coords,

        [12:03:08] transpile failed
        [12:03:08] dev server running: http://localhost:8100/

        [12:03:10] copy update started …
        [12:03:10] copy update started …

        Perdona por no haber contestado antes, no recib铆 la notificaci贸n por correo.
        Ya estoy suscrito a este hilo tambi茅n.

      2. Hola Edu, tal y como me indicaste, el error que report茅 queda solucionado a帽adiendo la l铆nea:

        declare var google: any;

        … debajo de los imports. Lo que no termino de tener claro es el porqu茅 de no fallarte a ti en Mac.

        驴Desde Mac te a帽ade las declaraciones a variables de forma autom谩tica?
        Bueno de todos modos, es un mal menor, lo correcto es siempre declarar todo, as铆 evitamos estos contratiempos.

        Gracias por tu tiempo.

  2. Bue dia Edu, al igual qe luis me aparece el mismo error en la funci贸n:

    Typescript Error
    Cannot find name 鈥榞oogle鈥.

    loadMap(){
    let mapContainer = document.getElementById(鈥榤ap鈥);
    this.map = new google.maps.Map(mapContainer, {
    center: this.coords,
    zoom: 12
    });
    }

    si he declarado en el index la api JS de google, pero al parecer no encentra el nombre como google como un objeto declarado.

    1. Hola Hernan, en mi entorno de desarrollo (en MAC) no me estaba dando este error, sin embargo lo he probado en windows y si me aparece el error.
      Lo podemos corregir a帽adiendo esto despu茅s de los imports:
      declare var google: any;

      He a帽adido esto al c贸digo del post.

      Espero que esto solucione el problema.

      Gracias por comentar, un saludo.

    1. Hola Julen, he probado tu soluci贸n pero segu铆a fallando, yo lo he podido solucionar a帽adiendo esto despu茅s de los imports:
      declare var google: any;

      En cualquier caso puede que tu soluci贸n sea 煤til en algunos casos.

      Muchas gracias por el aporte 馃檪

      Un saludo

  3. Luis, como andas, realmente quiero felicitarte! Muy buen tutorial! Espero que sigas adelante con el listado y demas! todos los pasos desde la instalacion hasta el mapa me salio a la perfeccion! :D. Te dejo un abrazo desde Argentina

  4. @Eduardo revilla tengo un error al llamar al metodo getCurrentPosition de google
    esto es llo que me avienta la consola:

    [19:14:25] typescript: C:/xampp/htdocs/misSitios/src/pages/inicio/inicio.ts, line: 67
    Supplied parameters do not match any signature of call target.

    L66: obtenerPosicion():any{
    L67: this.geolocation.getCurrentPosition().then(res => {
    L68: this.coords.lat = res.coords.latitude;

    agradeceria si tendria alguna solucion por que ya segui cada paso y me da erro

    1. Hola Eduard Antonio, si tienes instalada la 煤ltima versi贸n de ionic y has seguido al pide de la letra los pasos no deber铆a darte ning煤n problema, de todas formas prueba a quitar :any de despu茅s de la funci贸n obtenerPosicion(), es decir cambia obtenerPosicion():any por obtenerPosicion().

      Tambi茅n debes tener activado el permiso en tu navegador para obtener tus coordenadas si no, no se va ha mostrar el mapa.

      Un saludo

  5. Hola Eduardo.
    Muchas gracias por el tutorial, es buen铆simo.
    Hasta ahora, llevando el c贸digo al pie de la letra me va todo OK.
    Es cuando llego a esta parte que me sale el siguiente error:

    Uncaught TypeError: Cannot read property ‘prototype’ of undefined
    at __extends (index.js:4)
    at index.js:57
    at Object. (index.js:116)
    at __webpack_require__ (bootstrap 1b3a12c鈥:19)
    at Object. (src async:7)
    at __webpack_require__ (bootstrap 1b3a12c鈥:19)
    at Object. (main.js:111120)
    at __webpack_require__ (bootstrap 1b3a12c鈥:19)
    at bootstrap 1b3a12c鈥:65
    at bootstrap 1b3a12c鈥:65

    Un saludo!

  6. Hola.

    Estoy haciendo una app con los mapas y me funcionaba todo bien hasta que cambi茅 algo en la navegaci贸n , pas茅 de esto :

    this.navCtrl.setRoot(MapasPage);

    a esto:

    this.navCtrl.push(MapasPage,{
    mivariable: opc
    });

    al entrar por primera vez funciona perfectamente, el problema es cunado regreso a la pagina anterior y vuelvo a entrar a MapasPage, es ahi cuando el mapa ya no carga y creo que es por queya se encuentra creado el mapa y el proceso intenta crearlo nuevamente, pero no se como podr铆a evitar eso, si me pudieran ayudar , se lo agradecer茅 mucho.

  7. Excelente Post, ya estoy mostrando el mapa. puede que le sirva a algunas personas, si estan usando el cli v3, el plugin lo instalan asi ionic cordova plugin add cordova-plugin-geolocation

  8. @Eduardo revilla, los tutoriales muy buenos y detallados. Felicitaciones y un agradecimiento por eso. Mi consulta es la siguiente he seguido todos los tutoriales hasta la parte 4 donde muestras la direcci贸n obtenida por coordenadas de maps. Hasta ahora lo he probado mediante el navegador de google, pero quise probarlo en mi smartphone android, y el mapa de google maps no se visualiza, no me genera ning煤n error en consola ni nada por el estilo, pero el mapa sigue sin verse, cosa que no pasa haciendo ionic serve –lab donde se ve muy bien el mapa. Pense que era el apikey el cual ya probe y no da en el dispositivo movil, pero si con normalidad en el navegador, Que podra ser? Espero tu respuesta o una ayuda. Saludos cordiales.

    1. Hola Diego:

      El mapa se muestra despu茅s de recibir las coordenadas, es posible que no se est茅 mostrando por que por alg煤n motivo no estas recibiendo correctamente las coordenadas, comprueba si las est谩s recibiendo si no es as铆 comprueba que tengas instalado correctamente el plugin de geolocation que se instala con:
      ionic cordova plugin add cordova-plugin-geolocation –save
      npm install –save @ionic-native/geolocation
      Y comprueba tambi茅n que tengas activado el gps en el m贸vil.
      Dependiendo del modelo de m贸vil puede que te d茅 alg煤n problema, yo tenia un dispositivo que a veces no me detectaba las coordenadas y al reiniciar el m贸vil volv铆a a funcionar correctamente.
      Si es por otro motivo y das con la soluci贸n agradecer铆a que lo compartieses aqu铆 para ayudar a otras personas que les suceda lo mismo.

      Un saludo

      1. Que tal Eduardo?, te comento, he reiniciado mi dispositivo m贸vil y no me sigue mostrando el mapa, pero cuando entro al modal, puedo ver las coordenadas lo cual el plugin esta trabajando correctamente. Quiero hacerte unas consultas adicionales a esto:

        1. En mi laptop – w10, la instalaci贸n de los plugins no me permite hacer con ionic cordova, simplemente debo ingresar ionic plugin add… y lo que sigue, existe alg煤n problema con eso? Despejame esa duda.
        2. Como el mapa no se sigue viendo, he notado que tanto el mapa como la direcci贸n en texto, son servicios de google, y ambos son los que est谩n fallando en mi aplicaci贸n, con el script que importamos, el cual no tiene apikey, debe funcionar correctamente? Es necesario y obligatorio un apikey?
        3. Al reiniciar mi dispositivo para solucionar lo de las coordenadas en una primera vez me salio la siguiente alerta : problema con acceso a file://android index html.
        Exactamente ese no fue el texto pero algo parecido recuerdo, luego ya no me ha vuelto a salir? a que se debe esto?

        De antemano muy agradecido con tu ayuda y espero tu respuesta.

        PD. Tengo una consulta sobre un problema que tengo para instalar ionic2 en mi laptop con windows 7, te escribo el comentario por aqu铆? o para guardar un orden te hago el comentario en la publicaci贸n donde explicas la instalaci贸n?

      2. Eduardo no se si se replico mi mensaje, pero lo vuelvo a postear porque me genero un error al publicar.

        Que tal Eduardo?, te comento, he reiniciado mi dispositivo m贸vil y no me sigue mostrando el mapa, pero cuando entro al modal, puedo ver las coordenadas lo cual el plugin esta trabajando correctamente. Quiero hacerte unas consultas adicionales a esto:

        1. En mi laptop – w10, la instalaci贸n de los plugins no me permite hacer con ionic cordova, simplemente debo ingresar ionic plugin add… y lo que sigue, existe alg煤n problema con eso? Despejame esa duda.
        2. Como el mapa no se sigue viendo, he notado que tanto el mapa como la direcci贸n en texto, son servicios de google, y ambos son los que est谩n fallando en mi aplicaci贸n, con el script que importamos, el cual no tiene apikey, debe funcionar correctamente? Es necesario y obligatorio un apikey?
        3. Al reiniciar mi dispositivo para solucionar lo de las coordenadas en una primera vez me salio la siguiente alerta : problema con acceso a file://android index html.
        Exactamente ese no fue el texto pero algo parecido recuerdo, luego ya no me ha vuelto a salir? a que se debe esto?

        De antemano muy agradecido con tu ayuda y espero tu respuesta.

        PD. Tengo una consulta sobre un problema que tengo para instalar ionic2 en mi laptop con windows 7, te escribo el comentario por aqu铆? o para guardar un orden te hago el comentario en la publicaci贸n donde explicas la instalaci贸n?

      3. Eduardo como estas?, he buscado y encontr茅 la soluci贸n, primero no tenia actualizado mi sdk de android y me faltaba actualizar el google repository y actualizar lo requerido en mi sdk, como tambi茅n actualizar los archivos necesarios en sdk para la versi贸n de android en la que estoy probando la aplicaci贸n que es 5.0.1.
        Luego de esto compile y aun mi mapa no se segu铆a mostrando y buscando encontr茅 esta soluci贸n en un blog. Debemos instalar el plugin de google maps el cual es el 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

        Resalto que el apikey va entre las comillas.

        – y luego ejecutamos el comando : npm install @ionic-native/google-maps –save

        Esto es para mi entorno windows.

        Luego de esto compile y el mapa de google maps ya se puede visualizar sin ningun problema. Espero le pueda servir a otra persona en caso tenga el mismo problema.

        La consulta sobre la instalaci贸n correcta en un entorno de windows 7 quisiera que me la puedas aclarar ya que hasta ahora no he tenido 茅xito. Espero tu respuesta Saludos cordiales

  9. Hola Eduardo, antes que nada agradecerte por los tutoriales tan buenos, quisiera saber si me puedes ayudar con estos errores que tengo:

    Al correrlo en el navegador sale este mensaje:
    typescript: C:/Users/pc/ionic/misSitios/src/app/app.module.ts, line: 6
    Cannot find module ‘@ionic-native/geolocation’.
    typescript: C:/Users/pc/ionic/misSitios/src/pages/inicio/inicio.ts, line: 4
    Cannot find module ‘@ionic-native/geolocation’.
    typescript: C:/Users/pc/ionic/misSitios/src/pages/inicio/inicio.ts, line: 15
    Cannot find name ‘IonicPage’.

    L15: @IonicPage()
    L16: @Component({

    Y si trato de correrlo en el celular sale esto:
    脳 Running command – failed!
    [ERROR] Exception: Using cordova-fetch for cordova-android@~6.2.2

    Saludos

    1. Hola Juan Guillermo, comprueba que has instalado correctamente ionic-native/geolocation con npm install @ionic-native/geolocation –save, si lo est谩s ejecutando desde linux o desde mac prueba ha poner sudo por delante.

      Un saludo

  10. Hola Eduardo, gracias por tu aporte ayuda muchisimo para empezar a trabajar con ionic. Yo tuve el mismo error que Juan Gullermo pero lo resolvi de esta manera:

    sudo npm update -g

    npm install @ionic-native/geolocation 鈥搒ave

    sudo ionic cordova plugin add cordova-plugin-geolocation –variable GEOLOCATION_USAGE_DESCRIPTION=”La app necesita geolocalizaci贸n” –save

    pero esta linea se borra del index.html cada vez que ejecuto el ionic serve -l

    https://maps.google.com/maps/api/js

    Luego de que termina de iniciar la app en el explorador agrego la linea y funciona OK

    Tienes idea de porque sucede esto?

    Gracias de ante mano.

    Saludos.

    1. Hola Omar,

      Antes de nada muchas gracias por compartir como solucionaste el problema, en cuanto a lo que me comentas no me ha pasado nunca, 驴Supongo que estar谩s editando el index.html de la carpeta src y no el de la carpeta www vedad?
      Por que si editas el index.html que est谩 en la carpeta www se va a reescribir cada vez que ejecutes la aplicaci贸n.

  11. Hola Buenos d铆as

    Hace un tiempo segu铆 su tutorial y me desplegaba el mapa pero ahora vuelvo a correr el proyecto y no sale, estoy usando inoc 3. 驴a qu茅 podr谩 deberse qu茅 el mapa no se desplegue para poder entrar a corregir?

    Muchas gracias por su colaboraci贸n

    1. Hola Fernando, en index.html cuando cargas el script de google maps tienes que a帽adir la clave de google maps de esta manera:
      <script src=”https://maps.google.com/maps/api/js?key=xxxxxxx” ></script>

      Antes para hacer pruebas no era necesario, pero ahora google lo exige para poder utilizar cualquiera de sus apis, por lo tanto tienes que obtener primero la clave para poder utilizar la api de google maps.

      En este enlace explican como obtener una clave:
      https://developers.google.com/maps/documentation/geocoding/get-api-key?hl=es-419

      Gracias por comentar.

      Un saludo

      1. Buenas tardes

        Hice lo que me recomend贸, pero no funciona. Sigue apareciendo en blanco y no obtiene la ubicaci贸n del punto. Creo que toca modificar algo m谩s.

        No se si sea necesario instalar el plugin de google maps o actualizar el plugin cordova-plugin-geolocation

        Gracias

        1. Hola Fernando,

          Prueba a desinstalar el plugin geolocation con:
          ionic cordova plugin rm cordova-plugin-geolocation
          npm uninstall –save @ionic-native/geolocation

          Y volver a instalarlo:

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

          Un saludo

  12. Saludos tengo este problema me da error en esta linea

    lift(operator: Operator): Observable;

    en ionic_native en el archivo Subject.d.ts

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.