Google Maps API + Jquery

Question

I'm trying to load a map generated with Google Maps API on a site. It displays properly inside a normal div but I want to show it only by clicking on a button, and that's the problem: I used jQuery to show and hide the div, but when it shows, almost the entire map is gray:

here's my code:

$(document).ready(function() {

    $('#div').hide();

    $('#button').click(function() {

        $('#div').show();

        return false;
    });
});

where's the problem? I appreciate your help, thanks.

You must delay map creation until its container is visible, see http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture — Marco Mariani, Apr 03 '12 at 13:42
possible duplicate of [Google Maps API - Strange Map "Offset" Behaviour](http://stackoverflow.com/questions/4647747/google-maps-api-strange-map-offset-behaviour) — David Hedlund, Apr 03 '12 at 13:42

score 0 · Accepted Answer · answered Apr 04 '12 at 08:50

Thank you! I solved it by adding this to the map script, in the first few lines:

function displayMap() {

document.getElementById('div').style.display="block";

initialize();

}

and this to my html:

<div id="button" onclick="displayMap()">Show Map</div>

replace #div with the name of the div which contains the map, and "Show Map" with img, text, whatever you want.

Google Maps API + Jquery

1 Answers1