Home/ Questions/Q 774031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T19:03:48+00:00

I need to be able to, using either V2 OR V3 (preferably 3), create

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0