Search code examples
jquerygoogle-mapsconflict

Google Maps API + Jquery

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.

Solution

  • 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.