Why is the google map not showing?

Ionic Framework ionic-v3
1

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 !

2

It’s been a little while since I’ve looked at that tutorial, but I’m pretty sure it still works. Did you also add the appropriate CSS to the map.scss file? Without that the map won’t display properly (you’ll just see a blank space instead).

You can also follow this tutorial if you like: http://www.joshmorony.com/create-a-nearby-places-list-with-google-maps-in-ionic-2-part-1/ it’s pretty much the same implementation for the maps, but it’s a bit of a nicer implementation.

1 Like
3

Cool, I even have the author of the tutorial here. Thanks for what you do!

And you are right, my css was wrong. I did update it but the bracket went messy and the code was not read well.

Working perfectly!