Hide google map until it is fully ready

[avdhooft]

How can I hide a google map until it is fully ready?
I use the following code at "page show":
code
setTimeout( function(){
var myOptions = { zoom :16, center: new google.maps.LatLng(newLat, newLng), mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map($('div[dsid="Kaart"]').get(0), myOptions);
var sfLatlng = new google.maps.LatLng(newLat, newLng);
var marker = new google.maps.Marker({ position: sfLatlng, map: map, title: var2 });
}, 1000);
/code

The code works fine, but the result is that you first see a map on the location that is set in the map properties. When the timer is finished the map is moved to the correct location. Without the delay it does not work (map not ready?).
I tried hiding the map at page load an show again when the marker is set. Hiding is no problem, but showing again did not work (Appery('Kaart').show();).

How can I do this?

[Oleg Danchenkov]

Hi.
Try this
code$('[dsid="Kaart"]').show();/code

[avdhooft]

The show works, but it introduced an other problem. The map is not loaded completely and is also centered on the wrong location. Also zooming out/in still does not load the map completely. The marker is on the left top part of the map and is just out of viewing scope.

I use a 'setproperty' at 'page show' to hide the map, and the following code (also 'page show'):
code
setTimeout( function(){
var myOptions = { zoom :16, center: new google.maps.LatLng(newLat, newLng), mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map($('div[dsid="Kaart"]').get(0), myOptions);
var sfLatlng = new google.maps.LatLng(newLat, newLng);
var marker = new google.maps.Marker({ position: sfLatlng, map: map, title: var2 });
$('[dsid="Kaart"]').show();
}, 1000);
/code

Before adding the hide map and the "$('[dsid="Kaart"]').show();" the map was loaded completely and centered correctly. I also tried with '$('[dsid="Kaart"]').hide();', but this does not help. Not hiding the map and keeping the "$('[dsid="Kaart"]').show();" code in loads and centers the map corectly but is not the behaviour I want (first a 'wrong' map is shown and when the timer ands the correct map is shown).

How can this be solved?

[avdhooft]

I have shared the app already with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a.

[Alena Prykhodko]

Hello! Did you try to test on device?

[avdhooft]

Yes. I tested it on a samsung android phone.
Similar result. Maps is only partly loaded and the marker is on the top left of the map just outside the viewing area.

[Kateryna Grynko]

Hi,

What is the Android version you use?

[Maryna Brodina]

Hello! After pre$('[dsid="Kaart"]').show();/pre add the following line pregoogle.maps.event.trigger(map, "resize");/pre

[avdhooft]

Android 4.3

[avdhooft]

Thanks!

I'm almost there: the map is now fully loaded. It is only not centered at the correct location. It should be centered around the marker, but the marker is just out of scope on the top left part of the map. The "test" in the browser and on the phone give similar result.