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 RobertoSilva007
      Olá, bom dia à todos!
       
      Estou desenvolvendo uma aplicação em PHP onde necessito que meus clientes possam gerar boletos por meio da mesma.
      O banco escolhido é o SICOOB e ele oferece uma API  própria para integração.
       
      Gostaria de saber se alguém aqui já usou essa API e sabe como trabalhar com ela, pois a documentação que eles disponibilizam é muito vaga.
       
      Não sei se essa pergunta está no tópico correto, caso não, peço desculpas.
      Agradeço desde já.
    • By DinhoPHP
      Olá! Peguei um feela, onde o cliente possui um campo de busca de reservas do Booking. A solicitação era de um menu moderno em tecnologias de estilo, seguindo o layout já desenvolvido por ele, até aí tudo bem. O problema é como fazer com que esses dados do formulários passados via GET, sejam recebidos corretamente pela página de resultados do Booking.com
      Tentei, utilizando mesmo names e ids da busca original, porém, o resultado desejado é satisfatório apenas onde digita o que desejamos buscar.
      <script type="text/javascript"> (function(d, sc, u) { var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0]; s.type = 'text/javascript'; s.async = true; s.src = u + '?v=' + (+new Date()); p.parentNode.insertBefore(s,p); })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js'); </script> <body> <div class="container"> <div class="row bg-primary justify-content-center my-3 text-white"> <form id="b_frm" method="get" action="https://www.booking.com/searchresults.html" enctype="multipart/form-data" class="form-inline my-3" target="_blank"> <div class="col-12 col-sm-12 col-md-6" data-test="true"> <label for="txt-search" class="justify-content-start"><i class="fas fa-search mr-1"></i>Pesquisar</label> <input type="search" id="b_destination" class="form-control w-100" name="ss" id="b_destination" value="Guarujá" title="Ex.: cidade, região, bairro ou hotel específico" placeholder="Ex.: cidade, região, bairro ou hotel, casa, apartamento" role="textbox" aria-haspopup="true"> <input type="hidden" name="dest_id" value="-645946"> <input type="hidden" name="dest_type" value="city"> </div> <div id="checkin_target" class="col-12 col-sm-12 col-md-3"> <label for="txt-date-in" class="justify-content-start">Data de entrada</label> <select class="form-control w-100" name="checkin_monthday" id="b_checkin_day"></select> <select class="form-control w-100" name="checkin_year_month" id="b_checkin_month"></select> </div> <div id="checkout_target" class="col-12 col-sm-12 col-md-3"> <label for="txt-date-out" class="justify-content-start">Data de saí­da</label> <select class="form-control w-100" name="checkout_monthday" id="b_checkout_day"></select> <select class="form-control w-100" name="checkin_year_month" id="b_checkout_month"></select> </div> <div class="col-12 d-inline-flex justify-content-end mt-3"> <label for="checkReserv"> <input type="checkbox" class="form-check-inline" name="checkReserv" id="checkReserve"> Reserve agora, pague depois </label> </div> <div class="col-12 d-inline-flex justify-content-end mt-3"> <button type="submit" tabindex="0" class="btn btn-danger form-control" value="search">Pesquisar</button> </div> <input type="hidden" name="error_url" value="/?aid=1704408;"> <input type="hidden" name="si" value="ai,co,ci,re,di"> <input type="hidden" name="label" value=""> <input type="hidden" name="lang" value="pt-br"> <input type="hidden" name="aid" value="1704408"> <input type="hidden" name="sp_plprd" value="UmFuZG9tSVYkc2RlIyh9YVXcKaaJl1Cl8VOf4QzoGuIOLLs5aG2FZ2ZavnPQr-nKVGXKwhi-SxV27wZ5e4ad8ZB_vNL0FpUBWR1nsdbY6J6ZBGBM6rnqKJd1-J9bY_Ur"> <input type="hidden" name="utm_campaign" value="nsb"> <input type="hidden" name="utm_medium" value="sp"> <input type="hidden" name="utm_source" value="FP_Searchbox"> <input type="hidden" name="utm_term" value="1704408"> </form> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://s.bookcdn.com/js/translations/translation_31.26.js"></script> <script src="https://s.bookcdn.com/build/booked/booked_bundle.74f2565a43a50d618c66d31c0adba095.js"></script> <!-- <ins class="bookingaff" data-aid="1704408" data-target_aid="1704408" data-prod="nsb" data-width="100%" data-height="auto" data-lang="xb" data-currency="BRL" data-dest_id="-645946" data-dest_type="city"> Anything inside will go away once widget is loaded. <a href="//www.booking.com?aid=1704408">Booking.com</a> </ins>--> </body>  
       
       
    • By luannsr12
      Olá pessoas, estou   utilizando o Google Charts, e me venho a necessidade de usar imagem nos gráficos.
      Alguém já usou, e sabe como fazer?
    • By edionas
      Bom dia,
      a tempos venho tentando exibir o conteudo dos links abaixo na forma de tabela organizada, usando importação dos dados atraves do link:
      http://api.tcm.ce.gov.br/sim/1_0/licitacoes?codigo_municipio=002&data_realizacao_autuacao_licitacao=20100101_20100115
      http://api.tcm.ce.gov.br/sim/1_0/licitacoes.xml?codigo_municipio=002&data_realizacao_autuacao_licitacao=20100101_20100115
      http://api.tcm.ce.gov.br/sim/1_0/licitacoes.json?codigo_municipio=002&data_realizacao_autuacao_licitacao=20100101_20100115
      Porem não tenho conseguido exito.
    • By Good
      Boa tarde,
      eu estou estudando como funciona um sistema de API  + Postback e estou com dúvidas...
      A linguagem mais prática para isto é NodeJS? 
       
      Por exemplo, vou liberar permissão para os usuários pegarem informações da conta de cadastro dele.. E por exemplo, quando eles atualizarem as informações de cadastro como nome, cidade, estado,  etc.. o sistema deve enviar no mesmo momento um postback com as informações..
       
      Como vocês fariam este sistema? Os grandes portais utilizam como? Tipo o mercado livre, google...
       
      aguardo resposta, 
      att
×

Important Information

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