0

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

  • You most probably need to investigate Drupal Behaviors. A quick blog on the topic is here: blog.amazeelabs.com/en/drupal-behaviors-quick-how and a page on drupal.org regarding javascript here: drupal.org/node/756722 – Jimajamma Mar 28 '14 at 20:22
  • Thanks Jimajamma, I've had a quick look at drupal behaviours, it looks like this will have to go into a custom module? – T Mardi Mar 28 '14 at 20:45
  • Yep, a quick custom module that loads your javascript with it wrapped in the behavior functionality is the way to go – Jimajamma Mar 29 '14 at 13:51
  • Hi Jimajamma, I've put my code in a custom module and included put my js file in drupal.behavious: (function ($) { "use strict"; Drupal.behaviors.gmap = { attach: function (context) { // JS here The map loads on initial view but again clicking through the ajax pages and back to the contact page it's not visible. What to try next? – T Mardi Mar 29 '14 at 22:14
  • The div is there but the map doesnt show. I can see in the source that the script is in the head. – T Mardi Mar 29 '14 at 22:23
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.