google maps api v3 not loading correctly

Question

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.

What does your HTML look like? Is it valid? You should probably trigger the google maps resize event on the map inside your initialize function. The posted code works fine for me (with HTML as required). — geocodezip, Aug 16 '13 at 15:16
@geocodezip 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. For example, if I do it on webkitTransitionEnd, it redraws 9 times, and keeps redrawing forever on my mobile browser. — emote_control, Aug 16 '13 at 18:20
Please update your question with any details, it is hard to read lots of information in the comments. I suggest triggering the map resize event once your page has rendered (as recommended in [the documentation](https://developers.google.com/maps/documentation/javascript/reference#Map), `resize | Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize');`). — geocodezip, Aug 16 '13 at 18:26

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

Does the map load in a hidden div/element? If so, show that div before loading the map. Look at this question: Google Maps loading strangely

edited May 23 '17 at 12:05

Community

1
1

answered Aug 16 '13 at 15:17

viarnes

2,018
2
19
31

It doesn't load in a hidden div, but it does load in a div that's concealed using CSS. I'm using this framework: http://www.nacodes.com/2013/04/23/Fullscreen-Layout-with-Page-Transitions The map loads on page load, but loads in a div that's sized down smaller than the map will be when its section is expanded. That seems to be the source of the problem. I'm trying to figure out how to redraw it on expand, but I can't just use webkitTransitionEnd, because it fires something like 9 times during the transition. – emote_control Aug 16 '13 at 17:41

google maps api v3 not loading correctly

1 Answers1