Google maps native not showing

Ionic Framework ionic-v3
1

Hello, yesterday i`m build with ionic cordova build android, and work. But, today, i build again, google maps not showing. I dont know why, Please help.

Lokasi.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform,LoadingController } from 'ionic-angular';
import { GoogleMaps, GoogleMap,GoogleMapsEvent,Marker,MarkerOptions,GoogleMapOptions } from'@ionic-native/google-maps';
import { Geolocation } from'@ionic-native/geolocation';

/**
 * Generated class for the LokasiPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-lokasi',
  templateUrl: 'lokasi.html',
})
export class LokasiPage {
  map:GoogleMap;
  loading:any;
  lat=0;
  long=0;

  constructor(public navCtrl: NavController, public navParams: NavParams, 
    public platfrom:Platform, public geolocation: Geolocation,public loader:LoadingController) {
      this.platfrom.ready().then(()=>{ 
        this.loadMap();
     
        
      })
     // this.showLoading();

  }

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

  //showLoading(){
    //this.loading= this.loader.create({
      //content:'Menunggu map'
    //});
    //this.loading.present();
  //}
  //dismissLoading(){
   // if(this.loading){
     // this.loading.dismiss();
      //this.loading= null;
   // }
 // }

loadMap(){
this.geolocation.getCurrentPosition().then((resp)=>{
  this.lat=resp.coords.latitude
  this.long=resp.coords.longitude


 let mapOptions: GoogleMapOptions = {
   controls:{
     'compass':true,
     'myLocationButton':true,
     'myLocation':true,
   },
    camera: {
       target: {
         lat: this.lat,
         lng: this.long
       },
       zoom: 18,
       tilt: 30
     }
  };


  this.map=GoogleMaps.create('map_canvas',mapOptions);
}).catch((error)=>{
  console.log('error',error);
});


  //wait the maps
  this.map.one(GoogleMapsEvent.MAP_READY).then(()=>{
    console.log('map ready')
  })
}
}

lokasi.html

<ion-header>

  <ion-navbar>
    <ion-title>lokasi</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <div id="map_canvas">
     
    
  </div>

</ion-content>
2

my reference https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/README.md

3

first of all change your div id to “map”

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

because you declare map variable instead of map_canvas

1 Like
4 
GoogleMaps.create('map_canvas',mapOptions);

searchs <div id="map_canvas"></div>

1 Like
5

thanks a lot. how to check if Geolocation is enable or not with native GPS? thanks

6

you can use this plugin