Google Maps in hidden div

Using Google Maps JS API v3 for embeding Google Maps in website is really cool and simple. You can decide if you want to add some markers, what info they should have etc. But you probably know that already and this post isn’t about how great GMaps are ;o)

There are some cases, where you decide to hide div with map inside. Like in some kind of tabs. Unfortunately when the map is revealed it’s not complete and probably look something like that:

broken google map

That’s not good. Where is the rest of my map?

You can find most basic example for displaying map with this API – of course – in google documentation. And this is where most people will start learning about it.

I will use similar example, but I will put my map, in really simple tab I created in jQuery. See online example of Google Maps hidden in tab. Don’t forget to check source code, before you continue.

As you can see in the example, when you click on “Tab Map” the map looks like it didn’t loaded completely. The code is no diffrent from the google example. I just hide div with map in tab.

What is the solution of this problem? The answer is:

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

Yep. That’s it. Well… almost. You need to know, where that thing should go ;o)

working solution for hidden map

I added below code to click event for my tab:

if($(this).attr('href')=='#tab2'){
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
}

I’m just checking if the user clicked link for tab with map. If yes, then I should trigger resize. BUT! Putting this piece of code it’s not enough. You need to move var map outside function initialize. That way from local one you changed it to global. If you don’t know the diffrence between global and local variable google it. It’s the basics. Don’t forget to remove var in initialize() function.

There is extra code for setting center, which resolve common problem after resizing. If you don’t set center, then your center will be in left top corner. You need to get coordinates for center BEFORE you resize your map.

Tada!

There is also another solution. You don’t have to initialize map on load. Why not initialize it when it’s needed?

second solution for hidden map

I removed onload event from body and just moved initialize() to on click event. That way map will load when it’s actually needed. Also it’s good to check if map has been already defined/assigned to avoid loading map on every click.

if($(this).attr('href')=='#tab2' && !map){
    initialize();
}

jQuery.mobile and map in hidden div

If you use jQuery mobile, pages are load/shown with some transition. So to get this working you need to make sure that map resize is triggered AFTER the transition when div is fully visible. To do so just attach it to pageshow event like this:

$(document).on( "pageshow", function( event, data ){
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});

and it should work like a charm. Just make sure it’s declared after map is initalized. If you initialize your map in .load event, then this should also be placed there.

Attention

This: google.maps.event.trigger(map, “resize”); really works. If it’s not working for you, you are doing something wrong or something else is not right. Either you can’t access the map object (make sure its in global scope) or you trigger this event too soon.