Wait for rendering the page until the Google Map is loaded

Question

My question is specific to Google maps v3 API. I have a header (h3), an image, and Google Maps on my page. I want the page to wait until my Google Map loads entirely. Currently, the browser displays the h3 and image before Google Maps has completely loaded.

Could you please provide the code associated with your current setup? — rjatkinson, Apr 30 '15 at 04:30
Why would you do that? Anyway, you need the map canvas (the element in which the map will be loaded) to be in the DOM for the map to be loaded. — MrUpsidown, Apr 30 '15 at 07:59

score 1 · Answer 1 · edited May 23 '17 at 10:29

1

You might be able to use an event listener to see when the google map becomes idle. Then once that event is fired you can add your other html through the JavaScript.

Here is a link to a similar question and answer: How can I check whether Google Maps is fully loaded?

edited May 23 '17 at 10:29

Community

1
1

answered Apr 30 '15 at 04:35

Spazmoe06

152
7

score 1 · Accepted Answer · answered Apr 30 '15 at 08:21

1

The event you need is idle, as @Spazmoe06 told you, and you can use it like this :

google.maps.event.addListenerOnce(map, 'idle', function(){
    // ...
});

You can find a list of all Google Maps events here.

answered Apr 30 '15 at 08:21

AlexB

7,302
12
56
74

Wait for rendering the page until the Google Map is loaded

2 Answers2