Ensuring google map loads

Question

I'm having some trouble integrating Google Maps API v3 on my website. Here is my code:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxx&sensor=true"></script><script>
var map;
function initialize() {
var mapOptions = {
  center: new google.maps.LatLng(<?php echo $lat;?>,<?php echo $lng;?>),
  //center: new google.maps.LatLng(32.295439,-64.7795),
  zoom: 17,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
var lL = new google.maps.LatLng(xxx,xxx);
var marker = new google.maps.Marker({
      position: lL,
      map: map
  });
alert('map loaded')
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Most of the time the alert and map display properly. Sometimes the alert displays, but the map does not. Sometimes neither the alert nor the map displays. No error messages ever get logged.

Here is an example: bermudareservation.com/lodgings/sea-song/

I tested this in all browsers and it shows the same behavior. I am using WP, so I tried using a plugin, but the same thing happened.

How can I ensure that the map loads every single time a user views the page?

UPDATE:

I got rid of the listener, but that created a new problem: sometimes the content never loads and the loading animation plays indefinitely. This error gets output when that happens:

Uncaught ReferenceError: google is not defined  

I can't trace this to a line number because I cannot see the javascript on the debug tools for some reason.

Answer 1

I've tried it around 15 times, the map loads each time.

But it takes some time, the map will be loaded onload(when all ressources are loaded), what is for me after 20-25 sec

First you should optimize the page to speed up the loading-time, e.g. there are multiple images with a size >1MB, up to 2.8MB ! , I would say it's a no-go for a webpage. Saving these images scaled to the needed size and compressed should decrease the size to 10% of the original

The complete size of the loaded data for this page is around 20MB.

Furthermore you don't need to wait for the load-event, call initialize immediately . The maps usually will be loaded onload to ensure that the map-container is already known, but in your page the container is already known, because the script that initializes the map is placed after the map-container.

Generally I would suggest to visit http://yslow.org/ for performance-guidelines