ansaurus

Question

Custom routes/paths/roads on Google Maps

Answer 1

A:

Why cant you just add a polyline to show "as the crow flies"?

webdestroya 2010-04-30 03:11:20

I think when the OP said that the students can walk through buildings, it was intended that they can pass from the narrow pathways between buildings. At least, that's how the demo website appears to be doing.

Daniel Vassallo 2010-04-30 05:55:29

Answer 2

+2 A:

If your campus is not very big, you may want to consider defining all the polyline routes by hand for each permutation, such that if you have 4 buildings A, B, C and D, you would need to define 6 routes:

A:B, A:C, A:D, B:C, B:D, C:D

Then simply build some basic JavaScript logic, that when you chose building A as starting point and building C as destination, you hide all polylines and show the A:C line only. You can also use Google's polyline methods to get the length in meters of each route, if this is required.

This is a short table of how many routes you would have to define, according to the number of buildings you have:

+-------------+--------+
|  Buildings  | Routes |
|-------------+--------+
|         5   |    10  |
|        10   |    45  |
|        15   |   105  |
|        20   |   190  |
|        25   |   300  |
+-------------+--------+

As you can see, it really gets out of control as the number of buildings goes up, so I would say that this option is only feasible to a certain point. At least you are lucky since the order of the permutations is not important, assuming that people can walk each route in both directions.

Interesting Note: I noticed that the Ottawa demo you supplied is not making any AJAX calls when requesting for directions. Therefore there is a good chance that they are doing the same as suggested above.

UPDATE:

Here is working demo using the v3 Maps API, which I hope can help you getting started:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps Campus</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
  <div id="map" style="width: 550px; height: 400px"></div> 

  <div>Start: 
    <select id="start">
      <option>Building 1</option>
      <option>Building 2</option>
      <option>Building 3</option>
    </select>
  </div>

  <div>End: 
    <select id="end">
      <option>Building 1</option>
      <option>Building 2</option>
      <option>Building 3</option>
    </select>
  </div>

  <input type="button" onclick="drawDirections();" value="GO" />

  <script type="text/javascript"> 
    var mapOptions = { 
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      center: new google.maps.LatLng(47.690, -122.310),
      zoom: 12
    };

    var map = new google.maps.Map(document.getElementById("map"), 
                                  mapOptions);

    // Predefine all the paths
    var paths = [];                         

    paths['1_to_2'] = new google.maps.Polyline({
      path: [
          new google.maps.LatLng(47.656, -122.360),
          new google.maps.LatLng(47.656, -122.343),
          new google.maps.LatLng(47.690, -122.310)
      ], strokeColor: '#FF0000'
    });

    paths['1_to_3'] = new google.maps.Polyline({
       path: [
          new google.maps.LatLng(47.656, -122.360),
          new google.maps.LatLng(47.656, -122.343),
          new google.maps.LatLng(47.690, -122.270)
       ], strokeColor: '#FF0000'
    });

    paths['2_to_3'] = new google.maps.Polyline({
       path: [
           new google.maps.LatLng(47.690, -122.310),
           new google.maps.LatLng(47.690, -122.270)
       ], strokeColor: '#FF0000'
    });

    function drawDirections() {
      var start = 1 + document.getElementById('start').selectedIndex;
      var end = 1 + document.getElementById('end').selectedIndex;
      var i;

      if (start === end) {
        alert('Please choose different buildings');
      }
      else {
        // Hide all polylines
        for (i in paths) {
          paths[i].setOptions({ map: null });
        }

        // Show the route
        if (typeof paths['' + start + '_to_' + end] !== 'undefined') {
          paths['' + start + '_to_' + end].setOptions({ map: map });
        }
        else if (typeof paths['' + end + '_to_' + start] !== 'undefined') {
          paths['' + end + '_to_' + start].setOptions({ map: map });
        }
      }
    }
  </script> 
</body> 
</html>

Screenshot:

Google Maps Campus

Daniel Vassallo 2010-04-30 05:32:19

The problem I'm having is twofold. While I do see the merit definitely of your demo here, and I'd LOVE if it were that simple, the task at hand requires that students can get from, say, Class A to Class B. The classes are somewhat close in proximity, and while I'm sure I could build the paths for the building to building, I'm told there are approx. 50 buildings.I've tried and tried, and there seems to be no way for me to do the ideal thing, which would be to basically create a custom 'road' which the google map will recognize as a pathable area.I may have to get to drawing paths by hand.

Douglas 2010-04-30 15:23:04

ansaurus

tags:

views:

answers:

Custom routes/paths/roads on Google Maps

related questions