Image not display correctly inside

Question

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.

Instead of editing the answer into your question, it would be a big help to the community if you added the answer as an answer (I think you need to wait a day or so) and mark it as accepted. This way we (the community) know this is answered, and others know what worked for you. — AnonJr, Oct 23 '13 at 15:24
I just did it. I tried to do it yesterday, but it didn't let me. However it says that I have to wait a day to accept it — Rumpelstinsk, Oct 24 '13 at 06:33
Thanks. I knew there was a delay before you could accept it, I just couldn't remember how long it was. — AnonJr, Oct 24 '13 at 13:01

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

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");

edited May 23 '17 at 11:50

Community

1
1

answered Oct 24 '13 at 06:31

Rumpelstinsk

3,107
3
30
57

score 0 · Answer 2 · answered Oct 23 '13 at 14:07

0

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.

answered Oct 23 '13 at 14:07

Delan Azabani

79,602
28
170
210

I know that. Maybe i dind't explain well. I'm going to edit my question – Rumpelstinsk Oct 23 '13 at 14:20

Image not display correctly inside

2 Answers2