CODEWITHSUNDEEP
javascriptjquerycssgoogle-maps
GRY
GRY

Reputation: 724

Show and hide div containing google map

I have a Google map in my page. Google Maps V3. the map is inside a div which can be shown and hidden when a user clicks another div. The problem is that when the div containing the map is shown, the map seems to be rendered all wrong.

This is not the case when I simply load the map in a visible div, initially.

The code looks like

$("#shomap").click(function(){
   $("#map_container").removeClass("my_hidden_element_class");
});

I have tried some solutions I found here on stackoverflow, such as resizing the map on the click event, but this did not help. I have also tried moving the Google maps Initialize() function out of the document ready event, and onto the click event. This also made no difference.

The map always looks like the screen capture below.

If I resize or zoom my browser window, the map adjusts itself and looks great. Any help would be appreciated.

enter image description here

Upvotes: 0

Views: 623

Answers (1)

asherstoppard
asherstoppard

Reputation: 834

Not the cleanest of methods but with a little more work in to the UI, potentially a loading or progress bar and the following would work quite nicely. Google Maps have always been a little temperamental when it comes to loading them whilst they are display none so the following jQuery ensures the DOM structure is there before bringing in the iFrame.

jQuery

$(document).ready(function(){
    $('#shomap').click(function(){
        $('#map-container').show(function(){
            $('#map-container').html('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2404.0307348438287!2d-1.2097479999999716!3d52.947869999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4879e9fa2e6aaaab%3A0xc99bf92a61f8b4dd!2sWollaton+Hall!5e0!3m2!1sen!2suk!4v1421599711279" width="600" height="450" frameborder="0" style="border:0"></iframe>');
        });
    });
});

Upvotes: 1

Related Questions