CODEWITHSUNDEEP
jquerycssgoogle-maps
Adham
Adham

Reputation: 64904

How to show div of google maps after hidding it

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 enter image description here

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();
});

Upvotes: 0

Views: 285

Answers (3)

Last Rose Studios
Last Rose Studios

Reputation: 2481

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

Upvotes: 2

Ernestas Stankevičius
Ernestas Stankevičius

Reputation: 2493

Initialize map on click, not on webpage start.

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

Upvotes: 1

duncan
duncan

Reputation: 31930

diaplay:none;

should be

display:none;

but I'm not sure if that's causing your problem.

Upvotes: -2

Related Questions