Wrong map center in iOS using nativescript-google-maps-sdk

Question

In iOS when I put marker and mapView location, the map does not display centered, but if I move the phone to landscape and rotate again to portrait the map center displays fine. In Android works fine.

You can get more information in this GitHub issue: https://github.com/dapriett/nativescript-google-maps-sdk/issues/322

Answer 1

I have personally faced this and discovered that it's basically a layout problem on iOS. The height and width attribute values supplied to the MapView's XML element are somewhat differently treated by iOS. The solution to our problem, as described in the question itself is resizing the map on runtime (as rotating the screen makes it go through a resizing routine). Applying this absurd logic at the beginning of the map render, solves the problem.

This is how I did it:

Provide the width value of the MapView in XML:

<maps:mapView width="100%" mapReady="onMapReady" />

and set the height of the map inside onMapReady method, with a 100 millisecond delay.

/* if you want to set height in DIP */

setTimeout(() => this.mapView.height = 500, 100);

or if you want to set height in percentage

/* [0.85 means 85% here] */

setTimeout(() => this.mapView.height = {
    unit: '%',
    value: 0.85
}, 100);

100 millisecond delay makes it go through the resize effect. Tested on iOS 12.1