Mapping With Drupal - Alan Palazzolo [37]
// Namespace $ for jQuery. This ensures that $ will
// actually equal the jQuery function.
(function($) {
// ...
})(jQuery);
The next part is where we use Drupal’s Behaviors. The property that we add onto Drupal.behaviors is up to us, but it must be uniquely named, so it is good to prefix it with the name of your module:
/**
* Wrap handlers in a Drupal behavior so that
* we can be sure that everything is available.
*/
Drupal.behaviors.mappingdrupal_gmap_extensions = {
// ...
};
Drupal Behaviors expect an attach function (and optionally a detach function) that will be fired whenever the Drupal.attachBehaviors method is called (for instance, on page load or when new elements are added with an AJAX call). Since we do not know how often Drupal.attachBehaviors will be called and why, we use the .once() method to ensure our code is only run once per page. We are adding this as a placeholder for now; we will add code to this part of the function in a later step of this tutorial:
'attach': function(context, settings) {
// The following ensures that the behavior is only performed
// once. Since we are adding a handler for all Gmap maps,
// we are not concerned with context.
$('body').once(function() {
// More code to go here later in the tutorial.
});
},
Now we add our own custom method to Drupal.behaviors.mappingdrupal_gmap_extensions to do the geolocation. Our method takes in the Google Maps API map object, then performs the HTML5 geolocation lookup; if a location is found, the map gets centered on it.
NOTE
This geolocate function could be in a separate JavaScript object, but since we already have this object to add to, this will help keep our code tidy.
// General function to geolocate user.
'geolocate': function(map) {
// First ensure that that the HTML5 geolocation controls
// are available. We might use some more helpful
// libraries for this, like Modernizr
if (typeof navigator != 'undefined' &&
typeof navigator.geolocation != 'undefined') {
navigator.geolocation.getCurrentPosition(function (position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
map.setCenter(new google.maps.LatLng(lat, lng));
map.setZoom(11);
});
}
}
So far we have created a JavaScript behavior that will get a user’s location. Now we need to write some code that will use the GMap module’s JavaScript API to allow our geolocation behavior to change the map. Here is the complete JavaScript file:
/**
* @file
* Main JavaScript file for Mapping with Drupal GMap Extensions module.
*
* Provides geolocation functionality for a Gmap.
*/
// Namespace $ for jQuery. This ensures that $ will
// actually equal the jQuery function.
(function($) {
/**
* Wrap handlers in a Drupal behavior so that
* we can be sure that everything is available.
*/
Drupal.behaviors.mappingdrupal_gmap_extensions = {
'attach': function(context, settings) {
// The following ensures that the behavior is only performed
// once. Since we are adding a handler for all GMap maps,
// we are not concerned with context.
$('body').once(function() {
// Add a handler to the map
Drupal.gmap.addHandler('gmap', function(elem) {
var gmap = this;
// gmap (this) is the main gmap module with the following
// main properties:
// - map: The Google Maps API object.
// - vars: The configuration passed from Drupal.
//
// elem is the DOM object that holds the Google Map.
// The ready event is fired when things are ready with
// the map.
gmap.bind('ready', function() {
// Normally should check the map object to see if the
// geolocation behavior has been enabled for this website,
// but it does not seem to be available.
Drupal.behaviors.mappingdrupal_gmap_extensions.geolocate(gmap.map);
// Again, we would normally check the map object to see
// if this behavior has been enabled, but for some reason
// this setting it is not available.
//
// We utilize