Google Map v2 doesn't show on first load, but does when height is set to less then 100%

[robhoefakker]

Hi there,

First of all, I love your plugin and really appreciate your work! We are using version 1 in combination with Ionic 2 and it works great. Now we are trying to implement the new version 2 without the use of the Ionic wrapper but we have a strange bug.

The goal is a full screen map.

• When the map div is set to height:100% it DOES NOT show on first load. When the keyboard is then pushed up or the rotation of the device is changed the map does show.

• When the map div is set to anything less then height:100%, so for example 99.99% or device height - 1px it DOES show on first load.

I've read that you guys are not familiair with Ionic, but maybe you have any idea what's causing this behaviour?

Thanks in advance.

This is the code used to load the map:

loadMap(location){

 console.log('Start loading map.');

      let mapEle = this.theMap.nativeElement;

      this.map = new plugin.google.maps.Map.getMap(mapEle, {

       'mapType': plugin.google.maps.MapTypeId.HYBRID,
       'controls': {
          'compass': false,
          'myLocationButton': false,
          'indoorPicker': false,
          'zoom': true
        },
        'gestures': {
          'scroll': true,
          'tilt': true,
          'rotate': false,
          'zoom': true
        },
        'camera': {
          'latLng': location,
          'tilt': 0,
          'zoom': 11,
          'bearing': 0
        }

      });

      console.log('Map should be ready.');

      // FIX map load..
      //this.theMap.nativeElement.style.height = this.platformHeight+'px';

      this.map.one(plugin.google.maps.event.MAP_READY, function() {

        console.log("Map ready event fired.");
        this.getUserSpots();

      });
}

[wf9a5m75]

Maybe insert the below code after the map ready. Try it please.

setTimeout(function() {
  cordova.fireDocumentEvent('plugin_touch', {});
  // or
  // map.refreshLayout();
}, 100);

[robhoefakker]

Thanks for the quick response. I tried it with different timeouts and also in a typescript way, but no success. When I use Safari or code to resize the container a touch event is needed to show the map (render). But with height:100% even a touch event is not making it work. I did find a solution using your tip! It's not perfect but working for now. One thing that I overlooked while trying your solution is the use of function(){} instead of () => {} which results in this.map not referencing to the correct object.. Below is the code i'm using now and which is working. The initial map div height is set to 99.99% otherwise it won't work.

It looks like the plugin thinks it's overlapping the viewport, which is weird because this plugin does work within a scrollable div right? (I saw this in one of your examples.)

loadMap(location){

  console.log('Start loading MAP');

  let mapEle = this.theMap.nativeElement;
  this.map = new plugin.google.maps.Map.getMap(mapEle, {

    'mapType': plugin.google.maps.MapTypeId.HYBRID,
    'controls': {
      'compass': false,
      'myLocationButton': false,
      'indoorPicker': false,
      'zoom': true
    },
    'gestures': {
      'scroll': true,
      'tilt': true,
      'rotate': false,
      'zoom': true
    },
    'camera': {
      'latLng': location,
      'tilt': 0,
      'zoom': 11,
      'bearing': 0
    } 

  });

  console.log('Map should be loaded.');     

  this.map.one(plugin.google.maps.event.MAP_READY, () => {

    console.log("Map is ready.");

    setTimeout(() => {

      this.theMap.nativeElement.style.height = this.platformHeight+'px';
      //this.map.refreshLayout();
      cordova.fireDocumentEvent('plugin_touch', {});

    }, 500);

  });

}

[wf9a5m75]

Regarding of function(){}, in order to runs this plugin on old browser including Android 4.0, I use the old styles. But thanks anyway.

---

Since the Ionic framework takes kind of longer time for initialization, but the plugin finishes the initialization than before, the ionic users face this situation sometimes. In order to save device battery, the plugin stops after the initialization until any events, such as touching or rotation, something.

If you face the problem, you need to insert the plugin_touch event when your JS framework is initialized.

More details, read here.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/whats-new-v2/README.md#change-4-save-battery-life

---

It looks like the plugin thinks it's overlapping the viewport, which is weird because this plugin does work within a scrollable div right? (I saw this in one of your examples.)

Correct.

[robhoefakker]

Thank you, I did read that part. I'm going to add an eventlistener to listen to both the map ready and the Ionic view load before performing the plugin_touch event. :) Thanks for the help!

[wf9a5m75]

:)