CODEWITHSUNDEEP
javascriptgoogle-maps
Rumpelstinsk
Rumpelstinsk

Reputation: 3241

Image not display correctly inside <div style="display:none;">

In a Web Page, I'm trying to get the coords of an adress given by the user.

I'm trying to do something like: http://www.bufa.es/google-maps-latitud-longitud/

But I have a problem. The map is placed inside a div with this structure:

<div id="divgeolocalizacion" style="display:none;">
...
<div style="width:100%; clear:both;">
    ...
    <div style="float:left; width:57%; margin-right:3%;">
        <div id="map">
            ...
        <div>
    <div>
<div> 
<div>

The user has a button on the page, which executes some javascript code. This code only changes the div display style to "block". The problem is that the map is very very small. However, when I open developers's tools with F12, the image changes its size.

Why i'm getting this strange behaviour? Before you ask, I didn't have any "console.log()" on my javascript code.

Pd: When div's display style is initially set to "block" all works perfectly.

Upvotes: 0

Views: 211

Answers (2)

Rumpelstinsk
Rumpelstinsk

Reputation: 3241

I found this solution by vaelico here: Google Maps Display:None Problem

To solve the problem is necessary to add this line in the javascript after changing the div's display style: 

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

Upvotes: 1

Delan Azabani
Delan Azabani

Reputation: 81384

none and block are values of the display property, so you should have either

display: none;

or

display: block;

in your tag's style attribute, not the values alone.

Upvotes: 0

Related Questions