Google Maps blank on IOS

Ionic Framework ionic-v3
1

I have an app that uses Google Maps, and it is working fine on Android.

But it is blank on IOS. Nothing appears on my console, so I have no idea why =/

My Screen:

image
Captura de Tela 2016-08-11 às 18.13.14.png313×575 18.6 KB

The plugin:

image
Captura de Tela 2016-08-11 às 18.14.02.png700×90 21.9 KB

My maps provider:
image

Does anyone has any idea how to fix this?

2

Use the JavaScript SDK. It’s more reliable than the cordova plugin because you have Google’s own SDK API with no bridge between you and the SDK. The cordova plugin that ionic-native wraps is very unstable and the developers that own it are non-responsive to many of the bugs.

There is currently a bug where the map will sometimes load blank in iOS.

3

My problem is that the Javascript SDK is really slow compared with the Native.

4

Have you checked the console for any errors?

5

Yes, I’ve checked on Safari Console, but nothing =/

6

I had that same problem (speed of Native over JS SDK), but then I saw how incredibly unreliable the cordova plugin is and the slight delay in loading tiles etc, in the JS version became more than acceptable since I knew I could ship code that works.

One way to help the speed of the Map JS SDK is to let the container live outside of the ion-app container so it isn’t destroyed as you constantly change the Nav Stack. You can achieve this with a provider dedicated to the Map.

7

Humm interesting, could you share an example of your approach ?

8

Two things, make sure you include the following style in your app to workaround a little display bug with Ionic:

ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

and also make sure that you give your map container a height:

#map_canvas {
	height: 100%;
}

I’m actually working on a tutorial for this now as well, which will probably be out today.

Edit: Here’s the tutorial: http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/

9

Could you explain how did you do that?

10
  1. Create a page Component called MapPage. This is where you will be “showing” the map.
  2. Create a provider called MapService. This injectable will be an app-level provider, not just for the MapPage.
  3. Create a position fixed div as your map container at the same level as in the index.html. By default, put a class on it that has opacity 0 and zindex of 0.
  4. After the app bootstraps, you can initialize your JS map in this div using the MapService. Since its not set to display:none the JS SDK will actually fetch the map tiles.
  5. When a user navigates to the MapPage, you use the MapService to toggle the visibility of the map by setting the opacity to 1 and zindex to 100. The MapPage is also where you could find the user’s location, handle loading markers, info windows, etc using methods from the MapService.
11

Thank you very much, I’ll use that for sure =D

12

Hi Josh,

Thanks your sharing in the first place, I just followed your article recently to develop my first Google Maps App, and solved so many problems I encounter, after I deployed my app into my mobile devices with Android version 4.4.2, it’s all working. Instead. when I deployed it into mobile devices with version 6.0.1, it can’t be displayed.

So I examined the source html file produced by Chrome Remote Debugging, I found that it caused by the problem which there is no any .gmaps_cdv class, have you any idea about how could I solve this problem because I feel like maybe somebody will encounter this issue, please?

please check the question I posted on Ionic Forum: Google Map display issue based on different Android version (4.4.2/6.0.1)