Google Maps display none document ready - css

Question

I have a problem with the wrapper for the Google map. The class is set by document ready to display:none. If I click on the link the map must be set on show(). It works, but the map doesn't display right.
Here's a screenshot:
And here is my JSFiddle example.
Here my HTML code:
show map
<div class="advertise-mapper">
<div class="responsiveContaineradv">
<div id="map-canvas" class="map-adver"></div>
</div>
</div>
Here my JS Code:
jQuery(document).ready(function() {
jQuery(document).on("click", ".advertise-map", function(e) {
e.preventDefault();
jQuery('.advertise-mapper').show();
});
});
var map;
function initialize() {
var locations = [
['<h4>BMX Golden MILE 20 Fahrrad</h4>250.00 €<br>zur Kleinanzeige', 51.4627921, 6.9787572],
['<h4>Apple Macbook Air 13 A1466 Juni 2013</h4>800.00 €<br>zur Kleinanzeige', 51.665041, 7.631431],
['<h4>Apple iPod nano 16 GB Grün 6. Generation</h4>60.00 € VB<br>zur Kleinanzeige', 51.5096015, 7.377755],
];
var myLatlng = new google.maps.LatLng(51.513587, 7.465298);
var mapOptions = {
zoom: 11,
center: myLatlng
}
var infowindow = new google.maps.InfoWindow({
maxWidth: 360
});
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var markers = new Array();
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation: google.maps.Animation.DROP
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function autoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
// Fit these bounds to the map
map.fitBounds(bounds);
}
autoCenter();
}
google.maps.event.addDomListener(window, 'load', initialize);
How can I make the map display correctly when shown?

Answer 1

I would make a few small corrections, the most important of which goecodezip mentioned in the comments.
In your onclick of .advertise-map, add the map resize (important) and autoCenter (optional).
jQuery(document).on("click",".advertise-map",function(e){
e.preventDefault();
jQuery('.advertise-mapper').show();
google.maps.event.trigger(map, "resize");
autoCenter();
});
Next, I'd make 'markers' a global variable:
var map;
var markers = new Array();
Finally, I'd move the autoCenter() function out from the initialize function.
With all those changes, I believe this is what you're looking for: http://jsfiddle.net/2xn7wywo/22/