Ionic google maps not show ( white page )

Ionic Native
1 
 loadMap(){
    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true,
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': this.latLng,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });
    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      console.log('Map is ready!');
      this.setMarker();
    });
  }

  setMarker(){
    if(this.latLng){
      //let customMarker = "www/assets/custom-marker.png";

      let markerOptions: MarkerOptions = {
        position: this.latLng,
        title: 'Mi posicion'
      };

      this.map.addMarker(markerOptions)
        .then((marker) => {
          marker.showInfoWindow();
        });
    }else{
      console.log("hehehe");
    }
  }
foundPosition()
  {
    let options = {
      enableHighAccuracy: true
    };

    let watch = this.geolocation.watchPosition();
    watch.subscribe((data) => {
      this.latitude = data.coords.latitude;
      this.longitude = data.coords.longitude;
      this.latLng = new LatLng(this.latitude,this.longitude);
    });

  }

      this.platform.ready().then(() => {

        setInterval(()=> {
          this.foundPosition();
        }, 2000);
});
2

What is this? Where does it come from? What are you importing where?
Are you getting any errors?

3

no error , ı want to show google maps

4

Make sure you define a width and height to the map div via CSS. Without it, you will have a white screen

Also, the www/ is not needed for the customMarker url

1 Like