Mapping With Drupal - Alan Palazzolo [36]
Figure 5-3. GMap geolocation behavior options
NOTE
There is some documentation on this hook found directly in the GMap module in the file gmap.php.
Add JavaScript
Now that we have the configuration, we need to add our client-side JavaScript (the code that runs in the user’s browser to generate the map and our geolocation Behavior). We could add the JavaScript to every page though our module’s .info file, but this would slow down the rest of the site by adding unnecessary JavaScript. We only need this JavaScript when maps are generated with the GMap module. Luckily, hook_gmap() gives us an opportunity to do things when the map is rendered and before the markup is generated, through the pre_theme_map operation. Let’s add that now. The following is the hook_gmap() implementation. We use drupal_add_js() to include our JavaScript file:
/**
* Implements hook_gmap().
*/
function mappingdrupal_gmap_extensions_gmap($op, &$map) {
// For documentation on this hook, look at the
// gmap.php file in the gmap module.
switch ($op) {
case 'pre_theme_map':
// We should check if the behavior is enabled, but it does not
// seem to be available here.
drupal_add_js(drupal_get_path('module', 'mappingdrupal_gmap_extensions') .
'/mappingdrupal_gmap_extensions.js');
break;
case 'behaviors':
return array(
'geolocate_auto' => array(
'title' => t('Geolocate user automatically'),
'default' => FALSE,
'help' => t('This will geolocate the user on each page load and
focus the map there.'),
),
'geolocate_block' => array(
'title' => t('Geolocate user with block link'),
'default' => FALSE,
'help' => t('This will geolocate the user only if they use
the action on the GMap Geolocate block.'),
),
);
break;
}
}
Bind interactions to the map
Finally, we will bind some interactions to the map. Up until this point we were just setting things up; this is where we will actually make the map do something. The first step is to provide a basic container for the functionality and make a geolocation function to get the user’s location from their phone or computer.
NOTE
We are using Drupal’s JavaScript Behaviors. Behaviors in Drupal are a way of attaching JavaScript functionality to elements on a page. Almost all JavaScript written for Drupal should use Behaviors. Documentation on JavaScript for Drupal is a little sparse, but a good place is Managing JavaScript in Drupal.
For finding the user’s location, we use the HTML5 Geolocation API. Note that not all browsers can take advantage of this. It is supported by Internet Explorer 9 and later, Firefox 3.5 and later, Chrome 5.0 and later, Safari 5.0 and later, and Opera 10.60 and later.
/**
* @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() {
// More code to go here later in the tutorial.
});
},
// General function to geolocate user.
'geolocate': function(map) {
// First ensure 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);
});
}
}
};
})(jQuery);
Let’s break this down a bit. First, we wrap all our code in the following block to ensure that the dollar