Question

How to show DIV of Google Maps after I have set it’s Display:block.

but after I showing it I get Google maps like in the following image, the image doesn’t appear in whole DIV

edit

I have this code div that shows the map

<div id="map"></div>

css

---

#map{
width:500px;
height:500px;
diaplay:none;
}

jquery

---

$("#button").click(function(){
   $("#map").show();
});

Answer 1

A common problem, it’s an issue of not having a width or height properly set.
You have to tell it to redraw the map with something like this

google.maps.event.trigger(map, 'resize')
map.setCenter(latlng);

although it would depend on the code and the api version you are using