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');
});
}
}