Google Maps Issue blank grey screen after reload page


#1

Today I updated my ionic project at latest version of framework.

But if i go in my page for the first time google maps works fine but if I go back and return in the page google maps doesn’t work and return the blank screen

FIRST TIME

SECOND, THIRD TIME

Any solution?


#2

Did you remove the map after leaving the maps page ?


#3

No, how can I remove it?

until ionic framework 2.2.1 works fine


#4

Seems to me your map needs a resize(). I don’t know if you use the plain js maps api, but then it should be something like

google.maps.event.trigger(myMapsInstance,‘resize’) on ionViewDidLoad();


#5

Hi insert here

initMap() {

    this.mapInitialised = true;

    //Geolocation.getCurrentPosition().then((position) => {
    this.platform.ready().then(() => {


      var myLatLng = { lat: parseFloat(this.item.place.latitude), lng: parseFloat(this.item.place.longitude) };

      //let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      let mapOptions = {
        center: myLatLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
          {
            "featureType": "poi.business",
            "elementType": "labels",
            "stylers": [
              {
                "visibility": "off"
              }
            ]
          },
          {
            "featureType": "poi.sports_complex",
            "elementType": "labels",
            "stylers": [
              {
                "visibility": "off"
              }
            ]
          }
        ]
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      google.maps.event.trigger(this.map, 'resize')
      this.addMarker();
      this.getCurrentPosition();
    });
  }

but doesn’t work. I think that a problem of resize because when change platform on ionic serve with google chrome the map works fine


#6

Grey map tiles, you’re not the first one. There are many many people with issues, and it’s usually due to a draw that has already taken place before the view was rendered. I.e., don’t resize your map inside an init function, it doesn’t make sense. You only should initialize the map once on the first time you’re viewing it. Any alterations should be seperated from the initialization, as does the resize event.

Thus the resize event should occur after your map has initialized, always. Not in the process itself.

Maybe you have an error on the device? Did you already debug it on a device with the inspector open?


#7

Thanks I resolve with insert

ionViewDidLoad() { this.loadGoogleMaps(); }

in any page and remove it from constructor!

Thanks