MAP_READY not being fired only in iOS

[leabdalla]

My map is working good in Android and Browser, but not in iOS.

It looks like the event MAP_READY is not being fired.

My code is:

ngAfterViewInit() {
  console.log('ngAfterViewInit');
  this.platform.ready().then(() => {
    console.log('platform ready');
    this.startMap();
  });
}

startMap(){
  console.log('startMap');

  this.map = GoogleMaps.create('map', {

    controls: {
      'compass'          : false,
      'myLocationButton' : false,
      'myLocation'       : true, // (blue dot)
      'indoorPicker'     : false,
      'zoom'             : false, // android only
      'mapToolbar'       : false // android only
    },

    gestures: {
      scroll : true,
      tilt   : false,
      zoom   : true,
      rotate : false
    },

    preferences: {
      zoom: {minZoom: 6,maxZoom: 10},
      building: true
    }
  });

  this.map.one(GoogleMapsEvent.MAP_READY).then( (data:any) => {
    console.log('map is ready');
  });

}

So log shows 'startMap' was called but not the "map is ready" output.

Am I doing something wrong?

[wf9a5m75]

this.map = GoogleMaps.create('map');

Please try this one first.

[leabdalla]

what exactly you mean? I'm already doing this. can you show an example?

[wf9a5m75]

I recommend try to create a map WITHOUT options.

[wf9a5m75]

Even it does not work, please share your project files on github.

[leabdalla]

It didn't worked. Same problem.

There's my code: https://github.com/leabdalla/myapptest

[wf9a5m75]

.wrapper_mapa{
  background:#F2F2F2;
  width:100%;
  flex-grow : 1;
  position:relative;
  #map{
    width:100%;
    height:500px;  <-- change here.
  }
}

[leabdalla]

wow, I've spent hours on that! thank yooou!

[vikashth1]

Hello @leabdalla I am having issue with iOS build it's not displaying Map can you please help me with that

[leabdalla]

Sure, can you paste your code here?

[vikashth1]

@leabdalla

[leabdalla]

I'd suggest you to review a few points:

1 - Ensure that you defined your keys in config.xml file 2 - Just for a test, manually set your map and map_canvas width and height to integer numbers, avoiding percentage and auto (that was the solution for my previous problem). 3 - Add some console.log() to your code and check them in Xcode output panel, in special this.platform.ready() and this.loadMap() events to check if they're being fire correctly

Also, is this problem happening only in iOS?

[vikashth1]

Yes on browser it works fine I have only tested in iOS because right now I am trying to build this for iOS, This is my config.xml

<?xml version='1.0' encoding='utf-8'?>

Ionic App An awesome Ionic/Cordova app. Ionic Framework Team

[vikashth1]

I have added the Keys in config.xml

[wf9a5m75]

Remove background color

[vikashth1]

I tried but it's not working and I have added console log inside loadMap() and it's displaying console.

[leabdalla]

check if loadMap() is really being fired AFTER platform.ready()

[vikashth1]

Not sure how to do that?

[leabdalla]

await this.platform.ready();
console.log('1 = platform is ready');
await this.loadMap();
console.log('2 = loadMap called');

check if console will display in the correct order

[vikashth1]

Yes It's displaying in correct order

[vikashth1]

2019-09-10 19:17:41.258542+0530 Ionic App[31000:457398] 1 = platform is ready 2019-09-10 19:17:41.260426+0530 Ionic App [31000:457398] 2 = loadMap called 2019-09-10 19:17:41.261073+0530 Ionic App [31000:457398] 3 = loadMap load 2019-09-10 19:17:41.682102+0530 Ionic App [31000:457398]

[leabdalla]

Try this scss

.map{
  height: 200px;
  width: 200px;
}

#map_canvas {
  height: 200px;
  width: 200px;
  border: 1px solid red;
}

[vikashth1]

Now I see something like this

[vikashth1]

and in console

Failed to load optimized model at path '/Users/vikash/Library/Developer/CoreSimulator/Devices/65BD1D9D-7B47-4B7D-8A37-1A07E5F3EC4F/data/Containers/Bundle/Application/84969490-BD6A-407F-B1D9-9B5767DC9159/Ionic App.app/GoogleMaps.bundle/GMSCacheStorage.momd/StorageWithTileProto.omo' CoreData: annotation: Failed to load optimized model at path '/Users/vikash/Library/Developer/CoreSimulator/Devices/65BD1D9D-7B47-4B7D-8A37-1A07E5F3EC4F/data/Containers/Bundle/Application/84969490-BD6A-407F-B1D9-9B5767DC9159/Ionic App.app/GoogleMaps.bundle/GMSCacheStorage.momd/StorageWithTileProto.omo' CoreData: annotation: Failed to load optimized model at path '/Users/vikash/Library/Developer/CoreSimulator/Devices/65BD1D9D-7B47-4B7D-8A37-1A07E5F3EC4F/data/Containers/Bundle/Application/84969490-BD6A-407F-B1D9-9B5767DC9159/Ionic App.app/GoogleMaps.bundle/GMSCacheStorage.momd/StorageWithTileProto.omo' 2019-09-10 19:29:03.833214+0530 Ionic App[31740:464668] GLRenderTarget::CreateFramebuffer() failed. 2019-09-10 19:29:03.966640+0530 Ionic App[31740:464668] Google Maps SDK for iOS version: 2.7.30514.0 2019-09-10 19:29:03.966788+0530 Ionic App[31740:464668] New version of Google Maps SDK for iOS available: 3.4.0.0 2019-09-10 19:29:03.975790+0530 Ionic App[31740:464968] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C1.1:2][0x7f8c86530860] get output frames failed, state 8196 2019-09-10 19:29:03.976818+0530 Ionic App[31740:464968] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C1.1:2][0x7f8c86530860] get output frames failed, state 8196 2019-09-10 19:29:03.977496+0530 Ionic App[31740:464968] TIC Read Status [1:0x0]: 1:57 2019-09-10 19:29:03.977691+0530 Ionic App[31740:464968] TIC Read Status [1:0x0]: 1:57 2019-09-10 19:29:05.352149+0530 Ionic App[31740:464668] [framework] CUIThemeStore: No theme registered with id=0 2019-09-10 19:30:05.991247+0530 Ionic App[31740:464803] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C2.1:2][0x7f8c86718550] get output frames failed, state 8196 2019-09-10 19:30:05.991427+0530 Ionic App[31740:464803] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C2.1:2][0x7f8c86718550] get output frames failed, state 8196 2019-09-10 19:30:05.992105+0530 Ionic App[31740:464803] TIC Read Status [2:0x0]: 1:57 2019-09-10 19:30:05.992194+0530 Ionic App[31740:464803] TIC Read Status [2:0x0]: 1:57

[wf9a5m75]

I guess you put a map on something. Map is displayed under the browser.

[vikashth1]

[vikashth1]

Yes I have added under ion-item

[vikashth1]

`

        </ion-item>`

[wf9a5m75]

Remove (or hide) any components over the map. Inspect Safari's web inspector

[vikashth1]

I see ion-content background is overlapping, If I hide that then it's showing Map

[vikashth1]

@leabdalla Thank you so much for all your help it's working now but I see like when I open the page in which Map added it take few second in transition on that page

[wf9a5m75]

Of course, yes. Since the map is NOT a hTML element, such as web component, map needs to track the map div position with timer, then send the position information to native side. That's why delay will be occurred always.

[vikashth1]

@wf9a5m75 @leabdalla is there any way to remove this I only want to display map with marker, I don't want to do much with this map

[wf9a5m75]

Use Google Maps JavaScript v3 directly.

[vikashth1]

I tried to use with Ionic 4 and I am keep getting errors, Can you provide me reference guild how to do that.

[vikashth1]

@wf9a5m75 I am getting this error

[vikashth1]

I am able to fix that but again on iOS device I don't see Map

[vikashth1]

@leabdalla @wf9a5m75 anything you guys suggest me to remove the loading sec...