Hi all,
That’s my first post here, so please let me know if it’s not detailed enough.
I follow this tutorial Creating an Advanced Google Maps Component in Ionic 2 | Josh Morony and I’ve followed every steps.
Now my map page has the following files:
map.ts
import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ConnectivityService } from '../../providers/connectivity-service';
import { Geolocation } from 'ionic-native';
/*
Generated class for the Map page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
declare var google;
@Component({
selector: 'page-map',
templateUrl: 'map.html'
})
export class MapPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
mapInitialised: boolean = false;
apiKey: any;
constructor(public navCtrl: NavController, public connectivityService: ConnectivityService) {
console.log("constructing map");
this.loadGoogleMaps();
}
loadGoogleMaps(){
this.addConnectivityListeners();
if(typeof google == "undefined" || typeof google.maps == "undefined"){
console.log("Google maps JavaScript needs to be loaded.");
this.disableMap();
if(this.connectivityService.isOnline()){
console.log("online, loading map");
//Load the SDK
window['mapInit'] = () => {
this.initMap();
this.enableMap();
}
let script = document.createElement("script");
script.id = "googleMaps";
if(this.apiKey){
script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';
} else {
script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
}
document.body.appendChild(script);
}
}
else {
if(this.connectivityService.isOnline()){
console.log("showing map");
this.initMap();
this.enableMap();
}
else {
console.log("disabling map");
this.disableMap();
}
}
}
initMap(){
this.mapInitialised = true;
Geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
console.log("init map");
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
});
}
disableMap(){
console.log("disable map");
}
enableMap(){
console.log("enable map");
}
addConnectivityListeners(){
let onOnline = () => {
setTimeout(() => {
if(typeof google == "undefined" || typeof google.maps == "undefined"){
this.loadGoogleMaps();
} else {
if(!this.mapInitialised){
this.initMap();
}
this.enableMap();
}
}, 2000);
};
let onOffline = () => {
this.disableMap();
};
document.addEventListener('online', onOnline, false);
document.addEventListener('offline', onOffline, false);
}
ionViewDidLoad() {
console.log('Hello MapPage Page');
}
}
map.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Map</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div #map id="map"></div>
</ion-content>
I’ve also correctly edited the app.modules.ts to add the connectivityService in the provider list.
When I run my app in firefox (I have geolocation rights issue in safari, but that seems normal as I’m not in https) I see in the console that I get through all the code.
That is what I get in the console log
constructing map Google maps JavaScript needs to be loaded. disable
map online, loading map Hello MapPage La mémoire consommée par
will-change est trop importante. La limite du budget correspond à la
surface multipliée par 3 (467200 px). Les occurrences de will-change
dépassant le budget seront ignorées.localhost:8100 enable map init map
“Google Maps API warning: NoApiKeys
Messaggi di errore | Maps JavaScript API | Google for Developers”
The only thing that seems to go wrong is regarding the allocated budget to will-change. As the “occurence of will.change higher than the budget will be ignored”.
Is there a way to solve this ?
Thanks !