I'm having difficulty getting a map to initialize on window load. The problem is essentially the same as this question, except I'm already not using any jQuery to create the map, and so the solution presented there does not apply to me. My code is as follows:
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(43.703918,-79.422789),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('location-canvas'),
mapOptions);
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(43.703918,-79.422789)
});
}
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
On load, the map appears off-centre, with missing map tiles, but if I adjust the window size even a pixel, it corrects itself.
Edit: I'm using this CSS/Javascript framework: nacodes.com/2013/04/23/Fullscreen-Layout-with-Page-Transitions The problem seems to be that at the time it's drawn, the map div is not the correct size. And once it's up to full size a screen resize fixes it immediately. But the first draw is glitchy. I've spent the afternoon trying to figure out whether there's a good way to decide when to re-initialize the map after the CSS transition that doesn't cause other problems.