Keep a Google Maps v3 Map hidden, show when needed

Question

Is there a way of preventing a Google Maps (JS, v3) map being displayed from the get-go? I'm doing some pre-processing and would like to show my 'Loading' spinner until everything is good to go (more eloquently put, hide the map -- e.g. the container div – until all pre-processing is complete – at which point, show the map).

Hooking up the map's idle event doesn't help that much, since the map is already displayed when this event hits.

I know that the container div gets inline-styled by GMaps after loading, my first idea was to clear out the style attribute (whilst listening to the idle event), but it would be interesting to see if there is a way of creating the map and not displaying it until all pre-processing is done.

Maybe by using an argument to the new google.maps.Map constructor, or a MapOption ?

Any thoughts on this?

Thank you in advance!

I've used a $("#map_canvas").attr("style", "position:relative; visibility: hidden") trick, works. — Dr1Ku, Jul 29 '10 at 09:22
As Dr1Ku says. Render the Map to an invisible div, then show the div on the first idle event. Be sure to use addListenerOnce. — CrazyEnigma, Jul 29 '10 at 16:15

score 69 · Accepted Answer · edited Feb 12 '12 at 22:32

69

Also remember to call:

google.maps.event.trigger(map, 'resize');

if you have changed the size of the <div>. A display:none <div> has no size.

edited Feb 12 '12 at 22:32

Charles

50,943
13
104
142

answered Aug 05 '10 at 07:30

skarE

5,880
2
23
23

3

This was only a partial solution for me. I also had to call `map.fitBounds(bounds);` where bounds was the proper LatLngBounds object. – matt Feb 14 '12 at 00:16
1

In additon to what matt said, you can use `panTo(location)` to re-center the map. – dtanders Sep 14 '15 at 16:07
@dtanders what a great addition! – sitilge Jul 25 '17 at 15:36

Tom · Answer 2 · 2012-12-11T11:47:42.850

5

Or you could just hide it like with css visablility or css opacity.

$("#GoogleMap").css({ opacity: 0, zoom: 0 });
initialize();

google.maps.event.addListener(map,"idle", function(){ 
     $('#Loader').hide();
     $("#GoogleMap").css({ opacity: 1, zoom: 1 });
});

edited Dec 11 '12 at 11:47

answered Dec 11 '12 at 11:01

Tom

3,717
5
26
28

opacity:0 did the trick, i was trying to display:none, and didnt had good results – Rodrigo Zurek Jul 05 '13 at 17:11

score 4 · Answer 3 · edited May 10 '16 at 15:50

4

This works for me. I'm using the JQuery library.

$(document).ready(function(){
    $('#Checkbox').click(function(){
        $('#googleMapDiv').toggle();
        initialize(); // initialize the map
    });
});

edited May 10 '16 at 15:50

Mohamed Moanis

477
7
18

answered Oct 12 '11 at 08:23

Gabriel Ramirez

5,490
1
13
5

Hey Gabriel. Thanks for this amazingly simple and effective solution. Works like a charm! – Enes Mar 29 '13 at 03:52
Please note, that this will probably reload the map every time, and with maps API v3 there is a daily limit to how many times you may load the map element. – Simon Dec 30 '13 at 16:33

score 3 · Answer 4 · answered Feb 01 '19 at 16:50

another way to show the hidden map when map is first time rendering the <div> is to set style: visibility.

When firstly hidden, use visibility = hidden; to show use visibility = visible

the reason is: visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.

score 2 · Answer 5 · answered Mar 09 '14 at 17:28

this works fine for me, I use jquery tabs

setTimeout(function() {
        google.maps.event.trigger(map, "resize");
        map.setCenter(new google.maps.LatLng(default_lat, default_lng));
        map.setZoom(default_map_zoom);
    }, 2000);

om this link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

score 2 · Answer 6 · answered Jun 28 '16 at 09:02

2

This will work

    google.maps.event.addListener(map, "idle", function ()
    {
        google.maps.event.trigger(map, 'resize');
    });

answered Jun 28 '16 at 09:02

Geetesh

317
2
12

score 1 · Answer 7 · answered Feb 22 '11 at 13:00

1

better way:

gmap.redraw = function() {
    gmOnLoad = true;
    if(gmOnLoad) {
        google.maps.event.trigger(gmap, "resize");
        gmap.setCenter(gmlatlng);
        gmOnLoad = false;
    }
}

and in show click event:

$("#goo").click(function() {
  if ($("#map_canvas").css("display") == "none") {
    $("#YMapsID").toggle();
    $("#map_canvas").toggle();
    if (gmap != undefined) {
        gmap.redraw();
    }
  }
});

answered Feb 22 '11 at 13:00

Крайст

776
1
9
22

I thought that this temporary solution is better than nothing. – Крайст Mar 03 '11 at 18:30

score 1 · Answer 8 · answered Apr 19 '11 at 09:28

depending on what you are doing another posibility could be to have multiple bools you set to true when each process is done.

For example:

if you have a geocode service running which you want to wait for, you could have a var called GeoState

and in the result part of the geocoder set GeoState to true, then have a timed function check if all the services have returned true, when they have, make the map visible.

Keep a Google Maps v3 Map hidden, show when needed

8 Answers8

Linked

Related