google maps not loading correclty when first viewing website

Question

When viewing a website I'm developing atm for a project I'm working on - it seems that the first time you visit the site - the google map located in the footer fails to load and only loads an image of the location and not the interactive map. However when reloading the page the map works fine :/.

I'm still quite new to JS and any help with this would be greatly appreciated.

The website can be seen at http://www.kingsroad.net.au/

and the main footer page source can be seen at http://www.kingsroad.net.au/content/footerMain.php

Also kingsroad.net.au/js/general.js controls the loading of content on the page.

Answer 1

Could you try like this:

function loadGoogleMap(){
  var mapOptions = {
    ...
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  setTimeout(function() {
    google.maps.event.trigger(map, "resize");
  }, 3000);
}