Google Maps Issue blank grey screen after reload page

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

image

SECOND, THIRD TIME
image

Any solution?

Did you remove the map after leaving the maps page ?

No, how can I remove it?

until ionic framework 2.2.1 works fine

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();

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

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?

1 Like

Thanks I resolve with insert

ionViewDidLoad() { this.loadGoogleMaps(); }

in any page and remove it from constructor!

Thanks

Hi, I’m in need of some help. I also have issues after page reload.
I’m using javascript google maps api.

When I go in my page for the first time, the panBy method works fine but if I go back and return in the page, panBy method doesn’t seem to have any effect on the maps.

Therefore, my marker will be hidden under my custom div.
Any help would be appreciated.

Thanks.

    getLocation(){
      let options = {timeout: 10000, enableHighAccuracy: true};
      this.geolocation.getCurrentPosition(options).then((pos) => {
        console.log("receiverLat="+pos.coords.latitude, "receiverLng="+pos.coords.longitude);
        this.latFrom = pos.coords.latitude;
        this.lngFrom = pos.coords.longitude;
        this.initMap();
      }).catch((error) => {
        console.log('Error getting location', error);
        const alert = this.alertCtrl.create({
          title: 'Warning!',
          message: 'Could not get location. Please allow access to location and check your network or GPS setting.',
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              handler: () => {
                console.log('Cancel clicked');
              }
            },
            {
              text: 'Try Again',
              handler: () => {
                this.getLocation();
              }
            }
          ]
        });
        alert.present();
      });
    }

    initMap() {
      // initialize map
      let latLng = new google.maps.LatLng(this.latFrom , this.lngFrom);
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        // gestureHandling: 'cooperative',
        //Sets the gestureHandling property to cooperative to prevent one-finger movements
        zoomControl: false,
        //Sets the zoomControl property to false to remove the Zoom control buttons on the map.
        fullscreenControl: false
      };
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      // Add marker
      let markerIcon = {
          url: "https://res.cloudinary.com/myjiran/image/upload/v1538464327/mobile_asset/My-location.svg",
          scaledSize: new google.maps.Size(60, 60),
          origin: new google.maps.Point(0, 0), // used if icon is a part of sprite, indicates image position in sprite
          anchor: new google.maps.Point(20,40) // lets offset the marker image
      }

      let marker = new google.maps.Marker({
          map: this.map,
          animation: google.maps.Animation.DROP,
          icon: markerIcon,
          position: latLng
      });
      let infoWindow = new google.maps.InfoWindow({
          content: "You are here!"
      });

      google.maps.event.addListener(marker, 'click',() => {
          infoWindow.open(this.map, marker);
      });
      //start panning
      this.map.panBy(0, 150);

    }