google maps is not loading in properly

Question

I have been working on this website http://www.knudtzon.co and I have tried to include a google maps in the contact page. Unfortunately, the maps doesn't render properly, and when I navigate in the maps, it still doesn't work or load in content properly. I have found out that if I re do my script, so that the google maps is the first thing appearing on the screen, the map actually loads in correctly, but that doesn't really suit my design-wishes that much :)

I have looked for solutions on this, and tried to reload the map when I open the contact page, but it still doesn't seem to work. My log doesn't show any errors or anything, so I can't seem to figure it out.

If anybody has an idea of how to solve this, it would be amazing!

Answer 1

I think, once you are done with displaying the contact div, you need to call the resize event on google map.

var map = new google.maps.Map(selector, mapOptions); //Initialising map.
var currCenter = map.getCenter(); //Get the center location of the map
google.maps.event.trigger(map, 'resize'); //Trigger resize
map.setCenter(currCenter); //Setting the center in resized map.

Should be easy. Make sure you call this code after your contact div is loaded/resized/animated completely. Let me know if it works.