Jump to content
  • 0
huhuhu

Erro no mapa da API google com Ionic "Runtime Error Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null"

Question

Estou fazendo iniciando um app com Ionic 3,  e utilizando a API do google para geolocalização. Segui tutoriais e mesmo assim deu esse erro quando abro a página que deveria aparecer o mapa "

Runtime Error
Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null "
 
Já procurei em alguns lugares e não encontro solução, nenhuma funciona. To precisando de ajuda com esses mapinhas.
HTML da página inicial...
<ion-header>
  <ion-navbar>
    <ion-title>
      Teste 
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
     Latitude: {{lat}}
    </ion-item>
    <ion-item>
        Longitude: {{lon}}
       </ion-item>
  </ion-list>
  <button (click)="openMap()">Mapa</button>

  </ion-content>

.ts da página inicial:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { MapPage } from '../map/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  lat:any=0.0;
  lon:any=0.0;

  constructor(public navCtrl: NavController, public geolocation: Geolocation) {
   
//[	..	outra parte do código 	..	]

    this.geolocation.getCurrentPosition().then((resp) => {
      // resp.coords.latitude
      // resp.coords.longitude
      this.lat = resp.coords.latitude;
      this.lon = resp.coords.longitude;
         }).catch((error) => {
       console.log('Error getting location', error);
     });
     
     let watch = this.geolocation.watchPosition();
     watch.subscribe((data) => {
      // data can be a set of coordinates, or an error (if an error occurred).
      // data.coords.latitude
      // data.coords.longitude
     });

  }

  openMap(){
    this.navCtrl.push(MapPage);
  }
}
//[	..	outra parte do código	..	]
//}

HTML da página do mapa:

<ion-header>

  <ion-navbar>
    <ion-title>map</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div id="mapa" >
    
  </div>
</ion-content>

.ts da página do mapa:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import '../map/map';
import { Geolocation } from '@ionic-native/geolocation';
declare var google: any;
/**
 * Generated class for the MapPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

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

  private initPage(){
    let LatLng = new google.maps.LatLng(-22.913293, -43.688930);
    let mapOptions =  {
      center: LatLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true
    }

    let elemento = document.getElementById('mapa');

    let mapa = new google.maps.Map(elemento, mapOptions);
    
  }
  //ionViewDidLoad() {
   // console.log('ionViewDidLoad MapPage');
  //}


  constructor(public navCtrl: NavController, public navParams: NavParams, platform: Platform) {
    platform.ready().then(() =>{
    this.initPage();
    
    }, (err) => {
      console.log(err);
    });
  }

}

 

E na index.html (só uma parte):
 <!--para o api do google maps ..................................................................  -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com;
  script-src 'self' https://*.googleapis.com 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';">
  <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">
      <!-- google maps ..............................................................................  -->
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>

Talvez seja informação demais, mas, acho melhor que tenha mais do que menos.

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By biakelly
      Oi pessoal,
       
      Estou com uma tarefa um pouco diferente do que estou acostumada, preciso pegar as informações de cotação desta api e imprimir na home de um site:
       
      https://api.coinpaprika.com/v1/tickers/btc-bitcoin
       
      Vocês sabem como pegar esses dados e apresentar na tela? Poderiam me ajudar? Pela consulta é impresso desta forma:
      {"id":"btc-bitcoin","name":"Bitcoin","symbol":"BTC","rank":1,"circulating_supply":18513281,"total_supply":18513281,"max_supply":21000000,"beta_value":1.0099,"last_updated":"2020-10-10T17:00:49Z","quotes":{"USD":{"price":11346.72864008,"volume_24h":15303155526.715,"volume_24h_change_24h":-0.37,"market_cap":210065175744,"market_cap_change_24h":2.5,"percent_change_15m":-0.04,"percent_change_30m":-0.03,"percent_change_1h":-0.16,"percent_change_6h":0.08,"percent_change_12h":-0.54,"percent_change_24h":2.5,"percent_change_7d":7.13,"percent_change_30d":9.28,"percent_change_1y":36.19,"ath_price":20089,"ath_date":"2017-12-17T12:19:00Z","percent_from_price_ath":-43.52}}}  
    • By diagphp
      Olá amigos, sou muito novo no assunto de consultar APIs em PHP, então gostaria por gentileza de uma ajuda.
       
      Tem uma api externa que devemos consultar, mas está retornando o erro: PHP Fatal error: Uncaught Error: Class 'GuzzleHttp\Client' not found in /home1/

      A hospedagem é Hostgator.
       
       
      A consulta é simples:
       
      <?php
      $client = new \GuzzleHttp\Client();
      $response = $client->get("https://api.centraldofrete.com/v1/cargo-type", [
          'headers' => [
                  'Authorization' => '{token do cliente}',
              ],
      ]);
      $body = $response->getBody();
      print_r(json_decode((string) $body));
      ?>
       
      Alguém poderia me ajudar a fazer este tipo de consulta e obter o retorno da API? Tem algum arquivo a mais que tenho que colocar no servidor?
       
      Agradeço a  ajuda!
    • By Marcos PP
      Tenho que retornar os dados desta URL e transformar em variaves em PHP

      Ja tentei alguns exemplos mas so me retorna Null

      http://betontec.fortiddns.com:8082/api/login?usuario=joeliton&senha=123

       
      $data = file_get_contents('http://betontec.fortiddns.com:8082/api/login?usuario=joeliton&senha=123'); $data = json_decode($data,true); var_dump($data);  
    • By rdavisp
      Senhores, boa tarde.

      Pesquisei muito antes de abrir esse post, inclusive aqui, neste fórum. Encontrei dúvidas parecidas as quais tentei adaptar ao meu caso porem sem sucesso.

      A questão é a seguinte:

      Foi desenvolvida uma API em ASP.NET Core 2.0, mas por algumas solicitações do cliente, necessitei migrar para a versão 3.1. Existe uma SPA em Angular 7 que faz a requisição à API através de um método POST passando os parâmetros para a API que retornava um conjunto de dados para aplicação montar a tela. Após a atualização parou de funcionar! Por isso, gostaria de pedir a ajuda de vocês, por que, eu já esgotei as minhas tentativas.

      **No Controller da API está da seguinte maneira:**
       
      1 2 3 4 5 6 7 8 [HttpPost] [Route("api/[controller]")] public IGResult Post(Filtro filtro) {     Console.WriteLine("filtro: " + filtro);     var app = new IgApplication();     return app.getInstrucoes(filtro); }
      **E no angular se encontra dessa forma:**
       
      1 return this._http.post<IgResult>(environment.url + 'api/IG',  this.Filtro, options)

      Ao debugar a API, percebo que os dados do parâmetro **body** chegam nulos. Já tentei das seguintes maneiras abaixo, mudar a implementação do POST na API porém sem sucesso:
       
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 > //public async Task<IActionResult> Post([FromBody] Filtro pessoa) >         //public HttpResponseMessage Post(Filtro pessoa) >         //public async Task<ActionResult<IList<Todo>>> Create([FromBody]TodoCreateViewModel model) >         //public Task<IActionResult> Post([FromBody] Filtro filtro) >         //public ActionResult<Filtro> Post([FromBody] Filtro filtro) >         //public HttpResponseMessage Post(Filtro filtro) >         //public string Post([FromBody] Filtro filtro) >         //public IActionResult Post([FromBody] Filtro filtro) >         //{ >         //var app = new IgApplication(); >         //return app.getInstrucoes(filtro); >         //return null;// Json(filtro); >         //} >         //public async System.Threading.Tasks.Task<string> Post(HttpRequestMessage request) >         //{ >         //    string body = await request.Content.ReadAsStringAsync(); >         //    return body; >         //}

      Por isso se possível, gostaria muito de contar com a colaboração de vocês.

      Desde já muito obrigado!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.