Google Map will not show on new ajax page load

Question

I have added a styled google map V3 to a block using full html this all works fine and displays on page refresh. I'm have trouble with the map loading after linking to another page in conjunction with the ajax pages module.

All of my main menu links are ajax calls and pages load via ajax. On a page refresh the map will show, but if I click back and forth through the ajax pages the map will fail to load. I'm guessing this has something to do with this line?

google.maps.event.addDomListener(window, 'load', initialise); 

Is there something I can do to make the map load even after a ajax page change? I have tried to change the load to on.load but that doesn't make a difference.

Here is the code in my block:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id="map-canvas" style="height:400px; width:600px;"></div>
<script>
function initialise() {
var myLatlng = new google.maps.LatLng(53.068165,-4.076803); // Add the coordinates
var mapOptions = {
zoom: 8, // The initial zoom level when your map loads (0-20)
minZoom: 6, // Minimum zoom level allowed (0-20)
maxZoom: 17, // Maximum soom level allowed (0-20)
zoomControl:true, // Set to true if using zoomControlOptions below, or false to 
remove all zoom controls.
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + 
and - buttons.
},
center: myLatlng, // Centre the Map to our coordinates variable
mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
// All of the below are set to true by default, so simply remove if set to true:
panControl:false, // Set to false to disable
mapTypeControl:false, // Disable Map/Satellite switch
scaleControl:false, // Set to false to hide scale
streetViewControl:false, // Set to disable to hide street view
overviewMapControl:false, // Set to false to remove overview control
rotateControl:false // Set to false to disable rotate control
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // 
Render our map within the empty div
var image = new google.maps.MarkerImage("http://www.creare.co.uk/wp-content/uploads
/2013/08/marker.png", null, null, null, new google.maps.Size(40,52)); // Create a   
variable for our marker image.
var marker = new google.maps.Marker({ // Set the marker
position: myLatlng, // Position marker to coordinates
icon:image, //use our image as the marker
map: map, // assign the market to our map variable
title: 'Click to visit our company on Google Places' // Marker ALT Text
});
// google.maps.event.addListener(marker, 'click', function() { // Add a Click 
Listener to our marker
// window.location='http://www.snowdonrailway.co.uk/shop_and_cafe.php'; // URL to 
Link Marker to (i.e Google Places Listing)
// });
var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
content:"<h3>Snowdown Summit Cafe</h3><p>Railway Drive-through available.</p>" // 
HTML contents of the InfoWindow
});

google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener 
to our marker
infowindow.open(map,marker); // Open our InfoWindow
});
google.maps.event.addDomListener(window, 'resize', function() {  
map.setCenter(myLatlng); }); // Keeps the Pin Central when resizing the browser on   
responsive sites
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our   
'initialise' function once the page has loaded.
</script>

Thanks,

Terry

Answer 1

You can do it this way:

var success = Drupal.ajax.prototype.success;

Drupal.ajax.prototype.success = function(xmlhttprequest, options) {
    success.apply(this, arguments);
    initialize();
}

This will call initialize (make a note about your init function - it' called initialiSe) just after successful Drupal.ajax call.

Using this code

success.apply(this, arguments)

we ensuring ourselves that nothing interrupt normal behaviour of the original handler.