CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Douglas
Douglas

Reputation: 745

Custom routes/paths/roads on Google Maps

I need to be able to, using either V2 OR V3 (preferably 3), create paths which ignore buildings in a sense.

I was trying to create even a kml file to draw out all of the paths myself, and then find some way to turn them on/off as needed.

For example. The user wants to go from point A to point B. Between these points is a number of buildings. The user physically CAN walk through these buildings(it's a campus). I want to show them that on the map.

This way you don't have to do a loop-de-loop around, say, a parking lot, just to get to the other end of it.

If there is ANY way AT ALL to do this, I'd love to know.

An example of what I require can be found here: http://www.uottawa.ca/maps/

It's all pre-determined paths based on the two inputs from the user into the dropdown menu. I can plainly see this. But I have no clue if a) this can be done in v3, and b) how on earth they did it themselves.

Assistance required, and greatly appreciated!

Upvotes: 11

Views: 13942

Answers (2)

Daniel Vassallo
Daniel Vassallo

Reputation: 344551

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

Upvotes: 7

Mitch Dempsey
Mitch Dempsey

Reputation: 39939

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

Upvotes: 1

Related Questions