Google Maps showing in emulator but not in Ionic View and App


#1

I’ve spent days now trying to get Google Maps native to work in Ionic View. It works perfectly in my Android emulator. The App is already in the Apple Store and Google Play but the map is not showing.

I’ve been doing a lot of Google searches. Many issues are caused by not setting the Height of the map canvas. But I have it at 100% and this is reflected in my emulator.
Another issue can be when you set the map page as the root in navigation. But I use Push to navigate to the page.

Maybe the is a problem with the API key in conjuction with Ionic View?
I tried 3 API keys: 1 Generic (not limited to an OS) 2. Android 3. iOS. None of them work.

I’m desperate…
On the Android emulator:

On Ionic View:

My Google API keys:

Api keys in in Config.xml

<plugin name="cordova-plugin-googlemaps" spec="^2.2.5">
        <variable name="API_KEY_FOR_ANDROID" value="AIzaS***********************************x773VI" />
        <variable name="API_KEY_FOR_IOS" value="AIza***********************************59brw" />
        <variable name="PLAY_SERVICES_VERSION" value="11.8.0" />
        <variable name="ANDROID_SUPPORT_V4_VERSION" value="24.1.0" />
    </plugin>

winkels.html:

<ion-header>
  <ion-navbar>
    <ion-title>Winkels</ion-title>
  </ion-navbar>
</ion-header>

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

winkels.scss:

page-winkels {
    #map
    {
        width: 100%;
        height: 100%;
    }
}

winkels.ts:
In the emulator it gets to: alert(‘READY!’);
In Ionic View it never gets there.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMap, GoogleMaps, GoogleMapOptions, GoogleMapsEvent, CameraPosition } from '@ionic-native/google-maps';
import { Http } from '@angular/http';

@IonicPage()
@Component({
  selector: 'page-winkels',
  templateUrl: 'winkels.html',
})
export class WinkelsPage {

  map: GoogleMap;
  mapElement: HTMLElement;
  lat: any;
  lng: any;

  constructor(public navCtrl: NavController, private geolocation: Geolocation, private googleMaps: GoogleMaps, public http: Http) {
  }

  ionViewDidLoad()
  {
    console.log('ionViewDidLoad WinkelsPage');
    this.setCurrentPos();
    this.loadMap();
  }

  setCurrentPos()
  {
    alert('getting 6.3.4');
    this.lat = 52.362206;
    this.lng = 4.925889;

    let options = {timeout: 30000, enableHighAccuracy: false, maximumAge: 3600};

    this.geolocation.getCurrentPosition(options).then((resp) => {
       console.log(resp.coords.latitude);
       console.log(resp.coords.longitude);
       this.lat = resp.coords.latitude;

       this.lng = resp.coords.longitude;
       alert(resp.coords.latitude);
       alert(resp.coords.longitude);

      }).catch((error) => {

       console.log(error);
       alert(error.message);
       console.warn(`ERROR(${error.code}): ${error.message}`);
      });

  }


  loadMap()
  {
    this.mapElement = document.getElementById('map');


    console.log('na mapelement');
    alert('na MAP');


    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: this.lat,
          lng: this.lng
        },
        zoom: 10,
        tilt: 30
      }
    };
    console.log('na options');

    // this.map = this.googleMaps.create(this.mapElement, mapOptions);
    this.map = this.googleMaps.create('map', mapOptions);
    console.log('na thismap');

    this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      console.log('Map is ready!)');
alert('READY!');
// start gen code
this.map.addMarker({title: 'Gewoon vers', icon: '#fcc540', position: { lat: 51.57826, lng: 5.004005 } })
this.map.addMarker({title: 'De Oase van Beek', icon: '#fcc540', position: { lat: 50.9503, lng: 5.796313 } })
this.map.addMarker({title: 'Ekoplaza Amsterdam van Swindenstraat', icon: '#fcc540', position: { lat: 52.362206, lng: 4.925889 } })
this.map.addMarker({title: 'Ekoplaza Amsterdam AJ Ernststraat', icon: '#fcc540', position: { lat: 52.331892, lng: 4.873932 } })
alert('wp erop klaar');
    });
  }
}

#2

Did you confirm $> adb logcat? I guess the fingerprint is mismatched with released key.


#3

This might not be the answer you’re looking for, but you can use the regular Google Maps web api with Ionic just fine, either with Angular Google Maps or just the vanilla javascript library. If you can’t get the native plugin working this is always an option to fall back to.


#4

@bwhiting: I went with your solution. Now using the Google Maps SDK.
Thanks for saving me!

Do you know if I need a specifik API key for iOS and Android or can I just use the unrestricted one (the third key in my list)?


#5

The native Google Maps cordova plugin is not supported by the Ionic View application.
You can check here the supported plugins: https://ionicframework.com/docs/pro/view.html


#6

Well… I thought I was done. I was about to release the second version to the Play Store. So I tested the APK on my Android. No map, no markers, nothing! I went to look on youtube for right implementations. Below some video’s there is a viewer comment saying:

"The Google Maps JavaScript SDK does not work on Android devices. Use the native plugin".

Is that true?

I am about to give up, give back the assignment and take my loss (many hours).

has anyone seen the Maps Javascript SDK working on an Android device?