google map incorrect UI display, also the map is displaced of some offset

Vote count:

0

I am trying to display a google map inside a div, which is in an outer div that is hidden at first. When the outer div is toggled shown, the initialization of the map is triggered. In the initialization function, "google.maps.event.trigger(gMap, 'resize');" is used.

But now the map is displayed incorrectly as shown below: (sorry I'm a new registered user, and cannot post any image)

The div directly containing the map has both width and height set to 500px. So first, it should be a square. Changing the css only changes the height but the width is always displayed the same.

Secondly, the top left corner is displaced by some positive offset to the right and bottom.

Third, the UI controls are not displayed correctly. They are a mess, and also causes problem when I try to drag the map. If I use disableDefaultUI:true, the issue with dragging goes away.

So I want to see if any body can help me with getting it work.

Thanks!

asked 22 secs ago

ywtk

1