Hide google map until it is fully ready

[Kateryna Grynko]

Hi,

Did you try what Marina suggested?

[avdhooft]

Yes I did. It helped to make the map fully visible.

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.

[Kateryna Grynko]

Hi,

Try the following please:

1) Remove visible=false for map on Page show event

2) Add this code before setInterval():preAppery('Kaart').hide();/pre
3) Replacepre$('[dsid="Kaart"]').show();
google.maps.event.trigger(map, "resize");/preWithpreAppery('Kaart').hide();/pre

[avdhooft]

I supose the last change should be:
codeAppery('Kaart').show();/code

With codeAppery('Kaart').hide();/code the map is never shown.

When I use codeAppery('Kaart').show();/code the map is shown, but only part is loaded, and also centered on the wrong place. Similar as before.
It looks like the image in the 3rd post.
I have shared the app some time ago, if you want to check..

I have tried already losts of things, but I can not get it right..

[Maryna Brodina]

Hello! Could you tell us the app name?

[avdhooft]

See the 4th post for the name.

[Maryna Brodina]

Hello! Try this code:pre$('[dsid="Kaart"]').hide();
setTimeout( function(){
var center = new google.maps.LatLng(newLat, newLng);
var myOptions = { zoom :16, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP };
$('[dsid="Kaart"]').show();
var map = new google.maps.Map($('div[dsid="Kaart"]')[0], myOptions);
var marker = new google.maps.Marker({ position: center, map: map, title: var2 });
}, 1000);/pre

[avdhooft]

It works

Thanks!

[Ravi Darji]

$("#map_view").show("slow"); // use id of div which you want to show.
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/...";
document.body.appendChild(script);

[Evgene Karachevtsev]

Hello Ravi,

Thank you for the update.