how to add google maps to android

Question

i want to show map on my app. i create it with ionic, when i run with ionic cordova run browser it was showing like what i want, like this.

but when i try to run it from real device android ionic cordova run android it show me white screen with google logo, like screenshow bellow.

here my code: on .ts file.

export class AddAccountPage implements OnInit {
  modalTitle:string;
  modelId:number;
  @ViewChild('map') element: ElementRef;
  map: GoogleMap;

  constructor(private modalController: ModalController, public plt: Platform, public nav: NavController) { }

  ngOnInit() {

  }

  ionViewDidEnter() {
    this.plt.ready().then(() => {
      this.initMap();
    });
  }

  initMap() {

    // This code is necessary for browser
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'key',
      'API_KEY_FOR_BROWSER_DEBUG': 'key'
    });

    this.map = GoogleMaps.create(this.element.nativeElement);

    this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
      let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
      let position = {
        target: coordinates,
        zoom: 17
      };
    this.map.animateCamera(position);
      let markerOptions: MarkerOptions = {
        position: coordinates
      };
      const marker = this.map.addMarker(markerOptions)
        .then((marker: Marker) => {
          marker.showInfoWindow();
        });
    })
  }

}

on .html file

<ion-content fullscreen>
  <div #map style="height:100%;"></div>
</ion-content>

and finally on config.xml .

for the api im using random string, not real api , cause i dont have it.

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />

Answer 1

Try blow Example:

Install Plugin for Current Location: https://ionicframework.com/docs/native/geolocation

In your index.html add api key

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

In your HTML:

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

In your CSS:

#map {
  width: 100%;
 height: 100vh;
}

In your.ts

import { Component, ViewChild, ElementRef  } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
declare var google;

export class HomePage {

@ViewChild('map', {static: false}) mapElement: ElementRef;

  map: any;

  constructor(
    private geolocation: Geolocation
  ) {}

  ngOnInit() {
    this.loadMap();
  }

  loadMap() {
    let that = this;
    this.geolocation.getCurrentPosition().then((resp) => {
      let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    }).catch((error) => {
      console.log('Error getting location', error);
    });
  }
}