Google map generating incorrectly

Question

I have a program that takes in a zip code and makes a google map. The div that the map is set tohidden until the map is made. Once the map is made the div is set to display : block. The problem is that the first time the map is generated (and only the first time) it looks like this:

Once I hit the find a store button again it looks like this:

I have already tried to make a initial call to the map method (which I kept hidden until a real call is made) but this does not fix the issue. I don't want to show all my code (there is a lot) but here is how I make the map.

<div id = "map_canvas" style = " height: 300px; width: 300px;"></div>

//Creates a new center location for the google map
var latlng = new google.maps.LatLng(lat, lng);

//The options for the google map
var mapOptions = {
    zoom: 7,
    maxZoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

//Creates the new map
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Also note that both images below have the correct markers in the correct place.

Any suggestions?

Answer 1

this is a common problem. you need to trigger a map redraw after changing the container. most of the time this is caused by showing/hiding the div.

in v3 it's:

google.maps.event.trigger(map, 'resize')

in v2 it's:

map.checkResize()