Ionic 4 googlemap blank white screen on android

Ionic Framework
1

i used google map in project
it’s work fine in brwoser but not work on android when i run

cordova platform add android

how can i fixed it ?

loadMap() {

Environment.setEnv({

  'API_KEY_FOR_BROWSER_RELEASE': '(AIzaSyAsQhHai1m971xeUsGsL7VaDQi95u2KcNU `https://`)',

  'API_KEY_FOR_BROWSER_DEBUG': ''

});

LocationService.getMyLocation().then((myLocation: MyLocation) => {

  let options: GoogleMapOptions = {

    camera: {

      target: myLocation.latLng,

      zoom: 17,

    }

  };

  this.map = GoogleMaps.create('map_canvas', options);

  this.marker = this.map.addMarkerSync({

    title: 'Ionic',

    icon: {

      url: 'assets/images/place2.png',

      size: {

        width: 32,

        height: 32

      }

    },

    position: myLocation.latLng,

  });

  this.marker.on(GoogleMapsEvent.MARKER_CLICK)

  this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe((data) => {

    this.lat = data['0']['lat']

    this.lat = data['0']['lng']

    console.log(data['0']['lat'], data['0']['lng'])

    localStorage.setItem('latitude', data[0]['lat'])

    localStorage.setItem('longitude', data[0]['lng'])

    localStorage.setItem('district', data[0]['subLocality'])

    this.GetNewlocation(data['0']['lat'], data['0']['lng'])

    this.marker.remove()

    this.marker = this.map.addMarkerSync({

      title: 'Ionic',

      icon: {

        url: 'assets/images/place2.png',

        size: {

          width: 32,

          height: 32

        }

      },

      position: { lat: data['0']['lat'], lng: data['0']['lng'] },

    });

    this.marker.on(GoogleMapsEvent.MARKER_CLICK)

  }

  );

});

}

in config file

<preference name="GOOGLE_MAPS_IOS_API_KEY" value="AIzaSyCGCjN3qK_eoYut2nOHluS8xw4TsRW4qGI" />
2

90/5000

I use Google Maps in an application and the configuration I use is as follows

config.xml

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="YOUR-KEY" />

In your app.module.ts
import { GoogleMaps } from ‘@ionic-native/google-maps’;

// Import in providers
GoogleMaps

In app.component.ts

//Define a Google Maps variable
map: GoogleMap;

initializeApp() {
    this.platform.ready().then(async () => {
    });

   this.statusBar.styleBlackTranslucent();
      setTimeout(() => {
        this.splashScreen.hide();
      }, 100);

Environment.setEnv({
        // api key for server
        'API_KEY_FOR_BROWSER_RELEASE': 'YOUR_KEY',

        // api key for local development
        'API_KEY_FOR_BROWSER_DEBUG': 'YOUR_KEY'
      });

     this.loadMap();
}

Function loadMap()

loadMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 20.5179068, // Default position
          lng: -100.8959068 // Default position
        },
        zoom: 17,
        tilt: 60,
        duration: 3000
      },
      gestures: {
        scroll: true,
        tilt: true,
        rotate: true,
        zoom: true
      }
    };

    this.map = GoogleMaps.create('map', mapOptions);

    this.map.setPadding(55, 0, 55, 0);

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
        this.getPosition();
    });

  }

Function getPosition()

async getPosition() {

this.map.getMyLocation().then(position => {
      //console.log(position);
      this.map.moveCamera({
        target: position.latLng,
        zoom: 17,
        tilt: 60,
        duration: 1000
      });
    });
  }

In home-page.html or on your homepage

<ion-content class="ion-no-padding">
  <div #map id="map">
  </div>
</ion-content>

In yout css file

#map {
  height: 100%;
}

This is my configuration and it works excellent. This is a basic implementation example since I use Google Maps through instantiated objects.

3

i write same code but not showing in android
show white blank screen

4

What plugin to install from Google Maps? I use:

npm install @ionic-native/core @ionic-native/google-maps

It works for me with that plugin and with the code described above.

5

thank u it;s worked after i edite my code
but when i userd geolocation or LocationService not work on android

6

Hi why it was not working ? What changes you did to make it work ?

7

You needuse @ViewChield or no? I watched many videos using this but dont work for me.