Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 71531

Google maps native not showing

$
0
0

@7wins wrote:

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>

Posts: 2

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 71531

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>