Google Maps Directions usage with OpenLayers

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
boragunesdogan's picture

Hi all,

I have a fresh Drupal installation with OpenLayers on http://www.hartaicristanbul.ro/ . I wonder if it is possible to use Google Maps Directions functionality with OpenLayers.

https://drupal.org/project/getdirections module achieves this without OpenLayers; but I need OpenLayers for displaying my attractions on the Map with tooltip.

Comments

Here is my solution

boragunesdogan's picture

I realized that there was no OpenLayers and Google Maps Directions interaction yet. As you can check form http://www.hartaicristanbul.ro/ I used OpenLayers for displaying some attractions in Istanbul.

I also used JS Injector to change OpenLayersPopup behavior for displaying each attraction.

For Google Maps Directions, I used Get Directions in a Colorbox Node popup.

Most of the development time was spent on trying to get OpenLayersPopup theming (for attaching click event) and an annoying AJAX error during Colorbox Node usage.

Here is the JavaScript code I injected:

  Drupal.settings.nid = Drupal.settings.nid || [];
  Drupal.settings.getAllFeature;
  function my_map() {
    var current_layer = Drupal.openlayers.popup.popupSelect.layer
    var all_features_in_layer = current_layer.features;
   
    for(var key2 in all_features_in_layer) {
      var current_feature = all_features_in_layer[key2];
     
      Drupal.settings.nid[current_feature.attributes.nid] = current_feature;
    }
  }
 
  function show_popup(nid) {
    if (Drupal.settings.nid) {
      var feature = Drupal.settings.nid[nid];
     
      Drupal.openlayers.popup.popupSelect.clickFeature(feature);
    }
  }

  var colorBoxNodeRunTime = new Date().getTime();
 
  function openColorboxNode(uri, nid, obj) {
   
    //! prevent rerun :)
    var currentTime = new Date().getTime();
    if (currentTime - colorBoxNodeRunTime < 3000) return false;
    colorBoxNodeRunTime = new Date().getTime();

    jQuery(obj).colorboxNode();

    return false;
  }

  function openColorbox(obj) {
   
    jQuery.colorbox({href:jQuery(obj).attr('href')});

    return false;
  }

  jQuery(document).ready(function($){
    my_map();
   
    $('.attraction-link').click(function() {
      show_popup($(this).attr('data-nid'));
     
      return false;
    });

    Drupal.theme.openlayersPopup = function(feature) {
      var output = '';

      var colorboxNodeScript = 'direction-link" onclick="openColorboxNode(\'getdirections_box/location/to/' + feature.attributes.nid + '?width=800&height=600&iframe=true' + '\', ' + feature.attributes.nid + ', this); return false;"';
     
      feature.attributes.description = feature.attributes.description.replace("direction-link colorbox-node\"", colorboxNodeScript, "g");

      var colorboxScript = 'colorbox" onclick="openColorbox(this); return false;"';
     
      feature.attributes.description = feature.attributes.description.replace("colorbox\"", colorboxScript, "g");
     
      if (feature.attributes.name) {
        output += '<div class="openlayers-popup openlayers-tooltip-name">' + feature.attributes.name + '</div>';
      }
     
      if (feature.attributes.description) {
        output += '<div class="openlayers-popup openlayers-tooltip-description">' + feature.attributes.description + '</div>';
      }
     
      return output;
    }

  });

How to input directions?

johnatasJMO's picture

Hi,
looks great!
How did you manage to input Google Directions into Open Layers? Do I need to create a customs module?
My content has address A and B and I need to get the route (direction) to be viewed in open layers.

Location and Mapping

Group organizers

Group categories

Wiki type

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: