Google Maps API problemen bij Refresh pagina

[geertvansoest]

Beste,

Ik ben vandaag bezig geweest met een contact pagina op mijn portfolio ([url]www.geertvansoest.nl/contact.php)[/URL], met daarop ook een div met daarin de API van Google Maps.
Alleen word af en toe niet de kaart juist getoond (zie afbeelding).



Dit probleem lijkt zich onder andere voor te doen omdat de overkoepelende div waarin de map staat op het begin niet zichtbaar is en pas later via masonry wordt getoond.
Echter, in eerste instantie heb ik dit weten te tackelen door de volgende code toe te voegen:

function center()
{
  		lastCenter=map.getCenter();
		google.maps.event.trigger(map, 'resize');
		map.setCenter(lastCenter); 
}

Daardoor wordt de kaart meestal de eerste keer goed getoond.
Dus de kaart 'beeldvullend' en de marker in het midden (zie afbeelding).



Echter, als je met een bepaalde browsers (bij mij doet alleen Firefox het bijna steeds goed) de pagina ververst of later terug gaat naar de pagina doet het probleem (eerste plaatje) zich opnieuw voor.
Als je dan met je muis de kaart verschuift (dus de "Center" veranderd), werkt het weer goed. Hetzelfde is het geval als je de browser sluit en opnieuw opent.

Dit is mijn code:

var thuis = new google.maps.LatLng(51.323988, 6.004325);
var image = 'portfolio/images/pointer.png';
var marker;
var map;
	
function initialize() 
{
  	var mapOptions = 
  	{
    	zoom: 10,
    	center: thuis
	};

  	map = new google.maps.Map(document.getElementById('contactMapInner'),mapOptions);
  	
  	marker = new google.maps.Marker(
  	{
    	map:map,
    	position: thuis,
    	icon: image
    	//animation: google.maps.Animation.DROP
  	});
  	
  	google.maps.event.addListener(map, "idle", center); 
  	google.maps.event.addListener(marker, 'click', toggleBounce);
}

function center()
{
  		lastCenter=map.getCenter();
		google.maps.event.trigger(map, 'resize');
		map.setCenter(lastCenter); 
}

function toggleBounce() 
{
  	if (marker.getAnimation() != null) 
  	{
    	marker.setAnimation(null);
  	} 
  	else 
  	{
    	marker.setAnimation(google.maps.Animation.BOUNCE);
  	}
}
	
google.maps.event.addDomListener(window, 'load', initialize);

Ik zelf heb al van alles geprobeerd om steeds als je de pagina opent de center() functie opnieuw aan te roepen, maar zonder succes.
Ik hoop dat het duidelijk is.

Wie kan me helpen?
Alvast bedankt!

 

[geertvansoest]

Heb het inmiddels opgelost. Het gaf problemen als de map eerder "gemaakt" was dan dat de div was verschijnt.

Door dit:

google.maps.event.addDomListener(window, 'load', initialize);

te vervangen door:

google.maps.event.addDomListener(window, 'load', initializeWait);

function initializeWait()
{
    setTimeout(initialize, 500);
}

is het opgelost.