Skip to main content
ortografía y alguna cosa más
Origen Enlace
fedorqui
  • 16.7k
  • 24
  • 71
  • 134

Estoy tratando de crear una app en ionic 4 en la cual se navegue con ion tabs. El problema está en que debo mostrar un mapa dentro del ion tab y ni siquiera me toma las coordenadas. Estoy usando el api en javascript de google. La app compila bien pero no muestra el mapa, ya cambié las dimensiones del css pero aun así no muestra nada.

Código ts del tab 1:

    import { Component, OnInit } from '@angular/core';
    import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx';

    declare  var google;

    @Component({
      selector: 'app-tab1',
      templateUrl: './tab1.page.html',
      styleUrls: ['./tab1.page.scss'],
    })
    export class Tab1Page implements OnInit {

      constructor(

           private geolocation: Geolocation

      ) { }


      ngOnInit() {
      }
      async loadmap(){

       const respuesta = await this.geolocation.getCurrentPosition();

        const myLatLng = {
         lat: respuesta.coords.latitude,
         lng: respuesta.coords.longitude
        }; 
        console.log(myLatLng);
        const mapEle: HTMLElement = document.getElementById('mapa');
        // create map
          const map = new google.maps.Map(mapEle, {
          center: myLatLng,
          zoom: 12
        });

      }
    }

Estoy tratando de crear una app en ionic 4 en la cual se navegue con ion tabs. El problema está en que debo mostrar un mapa dentro del ion tab y ni siquiera me toma las coordenadas. Estoy usando el api en javascript de google. La app compila bien pero no muestra el mapa, ya cambié las dimensiones del css pero aun así no muestra nada.

Código ts del tab 1:

    import { Component, OnInit } from '@angular/core';
    import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx';

    declare  var google;

    @Component({
      selector: 'app-tab1',
      templateUrl: './tab1.page.html',
      styleUrls: ['./tab1.page.scss'],
    })
    export class Tab1Page implements OnInit {

      constructor(

           private geolocation: Geolocation

      ) { }


      ngOnInit() {
      }
      async loadmap(){

       const respuesta = await this.geolocation.getCurrentPosition();

        const myLatLng = {
         lat: respuesta.coords.latitude,
         lng: respuesta.coords.longitude
        }; 
        console.log(myLatLng);
        const mapEle: HTMLElement = document.getElementById('mapa');
        // create map
          const map = new google.maps.Map(mapEle, {
          center: myLatLng,
          zoom: 12
        });

      }
    }

Estoy tratando de crear una app en ionic 4 en la cual se navegue con ion tabs. El problema está en que debo mostrar un mapa dentro del ion tab y ni siquiera me toma las coordenadas. Estoy usando el api en javascript de google. La app compila bien pero no muestra el mapa, ya cambié las dimensiones del css pero aun así no muestra nada.

Código ts del tab 1:

import { Component, OnInit } from '@angular/core';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx';

declare  var google;

@Component({
  selector: 'app-tab1',
  templateUrl: './tab1.page.html',
  styleUrls: ['./tab1.page.scss'],
})
export class Tab1Page implements OnInit {

  constructor(

       private geolocation: Geolocation

  ) { }


  ngOnInit() {
  }
  async loadmap(){

   const respuesta = await this.geolocation.getCurrentPosition();

    const myLatLng = {
     lat: respuesta.coords.latitude,
     lng: respuesta.coords.longitude
    }; 
    console.log(myLatLng);
    const mapEle: HTMLElement = document.getElementById('mapa');
    // create map
      const map = new google.maps.Map(mapEle, {
      center: myLatLng,
      zoom: 12
    });

  }
}
ortografía y alguna cosa más
Origen Enlace

estoyEstoy tratando de crear una app en ionic 4 enen la cual se navegue en ella con ion tabs el. El problema esestá en que debodebo mostrar un mapa dentro del ion taby nisiquieratab y ni siquiera me toma las coordenadas, estoy. Estoy usando el api en javascript de google, la. La app compila bien pero no muestra el mapa, ya cambie cambié las dimenciones dimensiones del css pero aun asiasí no muestra nada

estare agradecido si me pueden ayudar,nada.

mi codigoCódigo ts del tab 1 es:

    import { Component, OnInit } from '@angular/core';
    import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx';

    declare  var google;

    @Component({
      selector: 'app-tab1',
      templateUrl: './tab1.page.html',
      styleUrls: ['./tab1.page.scss'],
    })
    export class Tab1Page implements OnInit {

      constructor(

           private geolocation: Geolocation

      ) { }


      ngOnInit() {
      }
      async loadmap(){

       const respuesta = await this.geolocation.getCurrentPosition();

        const myLatLng = {
         lat: respuesta.coords.latitude,
         lng: respuesta.coords.longitude
        }; 
        console.log(myLatLng);
        const mapEle: HTMLElement = document.getElementById('mapa');
        // create map
          const map = new google.maps.Map(mapEle, {
          center: myLatLng,
          zoom: 12
        });

      }
    }

estoy tratando de crear una app en ionic 4 en la cual se navegue en ella con ion tabs el problema es que debo mostrar un mapa dentro del ion taby nisiquiera me toma las coordenadas, estoy usando el api en javascript de google, la app compila bien pero no muestra el mapa, ya cambie las dimenciones del css pero aun asi no muestra nada

estare agradecido si me pueden ayudar,

mi codigo ts del tab 1 es:

    import { Component, OnInit } from '@angular/core';
    import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx';

    declare  var google;

    @Component({
      selector: 'app-tab1',
      templateUrl: './tab1.page.html',
      styleUrls: ['./tab1.page.scss'],
    })
    export class Tab1Page implements OnInit {

      constructor(

           private geolocation: Geolocation

      ) { }


      ngOnInit() {
      }
      async loadmap(){

       const respuesta = await this.geolocation.getCurrentPosition();

        const myLatLng = {
         lat: respuesta.coords.latitude,
         lng: respuesta.coords.longitude
        }; 
        console.log(myLatLng);
        const mapEle: HTMLElement = document.getElementById('mapa');
        // create map
          const map = new google.maps.Map(mapEle, {
          center: myLatLng,
          zoom: 12
        });

      }
    }

Estoy tratando de crear una app en ionic 4 en la cual se navegue con ion tabs. El problema está en que debo mostrar un mapa dentro del ion tab y ni siquiera me toma las coordenadas. Estoy usando el api en javascript de google. La app compila bien pero no muestra el mapa, ya cambié las dimensiones del css pero aun así no muestra nada.

Código ts del tab 1:

    import { Component, OnInit } from '@angular/core';
    import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx';

    declare  var google;

    @Component({
      selector: 'app-tab1',
      templateUrl: './tab1.page.html',
      styleUrls: ['./tab1.page.scss'],
    })
    export class Tab1Page implements OnInit {

      constructor(

           private geolocation: Geolocation

      ) { }


      ngOnInit() {
      }
      async loadmap(){

       const respuesta = await this.geolocation.getCurrentPosition();

        const myLatLng = {
         lat: respuesta.coords.latitude,
         lng: respuesta.coords.longitude
        }; 
        console.log(myLatLng);
        const mapEle: HTMLElement = document.getElementById('mapa');
        // create map
          const map = new google.maps.Map(mapEle, {
          center: myLatLng,
          zoom: 12
        });

      }
    }
Origen Enlace

No puedo ver mapa en un ion tab con ionic 4

estoy tratando de crear una app en ionic 4 en la cual se navegue en ella con ion tabs el problema es que debo mostrar un mapa dentro del ion taby nisiquiera me toma las coordenadas, estoy usando el api en javascript de google, la app compila bien pero no muestra el mapa, ya cambie las dimenciones del css pero aun asi no muestra nada

estare agradecido si me pueden ayudar,

mi codigo ts del tab 1 es:

    import { Component, OnInit } from '@angular/core';
    import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx';

    declare  var google;

    @Component({
      selector: 'app-tab1',
      templateUrl: './tab1.page.html',
      styleUrls: ['./tab1.page.scss'],
    })
    export class Tab1Page implements OnInit {

      constructor(

           private geolocation: Geolocation

      ) { }


      ngOnInit() {
      }
      async loadmap(){

       const respuesta = await this.geolocation.getCurrentPosition();

        const myLatLng = {
         lat: respuesta.coords.latitude,
         lng: respuesta.coords.longitude
        }; 
        console.log(myLatLng);
        const mapEle: HTMLElement = document.getElementById('mapa');
        // create map
          const map = new google.maps.Map(mapEle, {
          center: myLatLng,
          zoom: 12
        });

      }
    }