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 Bobrinha
      Olá, estou com um probleminha e não estou achando uma solução amigável e agradeço desde de já qualquer ajuda.
       
      Bom ao usar o php com o file_get_contents e buscar a URL https://www.udemy.com/api-2.0/courses/2064455?fields[course]=title,headline,price ela me retorna o price ou seja o preço em dolar, no entanto se eu jogar essa URL no navegador diretamente ela retorna o valor em real.
       
      O mesmo acontece se eu jogar no jquery com ajax e puxar a url no meu pc e no servidor web o preço fica em dolar mais se jogar diretamente no navegador fica em real o valor 
       
      Alguém saberia por que? 
    • By George Rewrited
      $data = file_get_contents("https://servicodados.ibge.gov.br/api/v1/localidades/estados"); echo "<pre>"; print ($data); echo "</pre>"; este código está me retornando isso:
      ����N�@�_��5&*�;(�h�;��J'0 ̐i�h|㚝o�sP�9�%��]Ӝ����so�ޘLY����2�X����u��k��*-��$�ʈ�$���������䂽�w�s��N6��I�q�5�jE�'��O�|Cr�[|ϩ⁓�d�O�%T���x3��j���9�\*OK�A5��'dH-�O]�BV��7Y �����-v-�������Xs.�K�"�F*�T���_�i��F���d]�XE����M+!|����f�����������6>�8�r=�e͖l����D0.�.� vU���q��1�N8�6���\܎z���� L�����'%�i��hs�z�n� ���}��IyjT���$sĮ fs���-� �����m�
       
       
    • By gfontan1910
      Olá boa tarde. Preciso de uma ajuda na criação de um mapa do Brasil de forma dinâmica de modo que seja possível clicar nos estados. Assim que selecionado um estado, preciso exibir algumas informações deste determinado estado. O mapa seria algo parecido com esse da home do Olx (https://olx.com.br).
       
      Alguém pode ajudar com algum material voltado para este tipo de desenvolvimento?
       
       
      Obs: tem um tópico sobre isso no fórum, porém de 2015 e muitos links que foram recomendados estão off atualmente
    • By gfontan1910
      Olá boa tarde. Preciso de uma ajuda na criação de um mapa do Brasil de forma dinâmica de modo que seja possível clicar nos estados. Assim que selecionado um estado, preciso exibir algumas informações deste determinado estado. O mapa seria algo parecido com esse da home do Olx (https://olx.com.br).
       
      Alguém pode ajudar com algum material voltado para este tipo de desenvolvimento?
       
       
      Obs: tem um tópico sobre isso no fórum, porém de 2015 e muitos links que foram recomendados estão off atualmente
    • By guinigri
      Boa tarde, preciso passar o valor do frete exibido da API dos correios para o pag seguro mas não estou conseguindo!
      Exemplo:
       
      O cliente entra no meu site add um produto ao carrinho e verifica o frete no próprio carrinho, seleciona se quer PAC ou SEDEX, e quando apertar no botão de pagamento do Pagseguro, ele envia o valor do frete selecionado para a API do pagseguro
       
      Segue os Codigos:
       
      --> FORM DO FRETE COM RETORNO DO VALOR:

       
      <form method="post" action="#" class="navbar-form navbar-left" role="textbox" id="t1" name="t1">                          <div class="form-group">          Simular frete: <input type="text" class="form-control" name="frete" placeholder="Frete" required id="frete">             <input type="hidden" name="vldeclarado" value="<?php echo $exibir['preco'];?>" />         </div>                                     <button class="btn btn-success" type="submit" name="submit">             <span class="glyphicon glyphicon-search"></span>                        </button>                                  </form>                          <?php             if($_POST):?>                 <div class="row">             <div class="col-sm-12" style="margin-top: 10px; margin-bottom: 0px; border-style: none; border-top: none; border-color: #CBCBCB; border-width: 3px;">                                  <?php             $frete = trim($_POST['frete']);             //echo "<h3>{$frete}</h3>";               require_once 'frete.php';             $table = frete( $frete );               echo $table;?>                                </div></div><?php     endif;//POST                              ?> --> API DO PAGSEGURO:
      <form method="post" target="pagseguro" action="https://pagseguro.uol.com.br/v2/checkout/payment.html">                        <!-- Campos obrigatórios -->           <input name="receiverEmail" type="hidden" value="EMAIL@gmail.com">              <input name="currency" type="hidden" value="BRL">             <!-- Itens do pagamento (ao menos um item é obrigatório) -->         <?php              $i = 1;         do{             foreach ($_SESSION['carrinho'] as $id_prod => $qnt)  {                 $code_prod = $conexao->query("SELECT * FROM produtos where id = '$id_prod'");         $exi = $code_prod->fetch(PDO::FETCH_ASSOC);                 $prod = $exi['produto'];                 $precouni = number_format(($exi['preco']),2,'.',',');                          ?>                   <input name="itemId<?php echo $i; ?>" type="hidden" value="<?php echo $id_prod;?>">                   <input name="itemDescription<?php echo $i; ?>" type="hidden" value="<?php echo $prod; ?>">                   <input name="itemAmount<?php echo $i; ?>" type="hidden" value="<?php echo $precouni; ?>">                   <input name="itemQuantity<?php echo $i; ?>" type="hidden" value="<?php echo $qnt; ?>">                                                   <input name="itemWeight<?php echo $i; ?>" type="hidden" value="0">         <?php         $i++;              }                      } while($i <= count($_SESSION['carrinho'])); ?>                     <input name="itemShippingCost1" type="hidden" value="300"> (VALOR DO FRETE AQUI)                                    <!-- Informações de frete (opcionais) -->           <input name="shippingType" type="hidden" value="">  (TIPO DE FRETE SELECIONADO AQUI) Desculpe se ficou grande, se alguem puder me ajudar ficaria grato!
       
×

Important Information

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