Google maps showing route and distance between 2 locations

Question

I'm working on a profile-website which shows the location of people using google maps.

I've implemented google maps and now it shows where the person you're viewing lives and where you live.

The code is here:

  var map = null;
  var geocoder = null;

  function initialize() {
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GScaleControl());
      map.addControl(new GMapTypeControl());
      geocoder = new GClientGeocoder();
    }
  }

  function showAddresses(address1,address2) {
    if (geocoder) {
      geocoder.getLatLng(
        address1,
        function(point) {
          if (!point) {
            alert(address1 + " not found");
          } else {
            map.setCenter(point, 13);
            var marker = new GMarker(point);
            map.addOverlay(marker);
            marker.openInfoWindowHtml(address1);
          }
        }
      );

      geocoder.getLatLng(
      address2,
      function(point) {
        if (!point) {
          alert(address2 + " not found");
        } else {
          map.setCenter(point, 13);
          var marker = new GMarker(point);
          map.addOverlay(marker);
        }
      }
    );
    }
  }

What it doesn't do however, is modify the zoom level when the 2 places are so far apart they don't fit on the map togheter. I don't know how to fix that.

The next step is that I want to have the map show a visual route between the two points and their distance when following that route.I've tried it on the google maps site and I know they have this functionality. I just can't find any documentation on how to implement it.

Or would it be better just to make a hyperlink that goes to google maps and gives you a prepared page? That also I don't know how.

Answer 1

It is in the API. you can find it with

route site:http://code.google.com/apis/maps

Here is one page, for example, that shows "driver directions" in an overlay with Flash. The API is a bit different when you are doing maps outside of flash, but it is the same basic code. http://code.google.com/apis/maps/documentation/flash/services.html

I did more work with MapQuest, so I am just getting into the Google Maps API.

Answer 2

Never done it, but seen GDirections in the api:

http://code.google.com/apis/maps/documentation/reference.html#GDirections

Loooks like what you are looking for.

Answer 3

Add all points to a Polygon. From the Polygon, get the LatLongBounds, which can be used to derive the zoom level.

    private function setMapZoomLevelBasedOnPlottedPoints(polygonPoints:Array):void
    {
        var pointBounds:LatLngBounds = getLatLongBounds(polygonPoints);
        _map.setCenter(pointBounds.getCenter());
        _map.setZoom(_map.getBoundsZoomLevel(pointBounds) - 1);
    }

    private function getLatLongBounds(polygonPoints:Array):LatLngBounds
    {
    for(var i:Number; i < polygonPoints; i++)
    {
            polygonPoints.push(polygonPoints[i] as LatLong);
    }
        var polygon:IPolygon = new Polygon(polygonPoints);
        return polygon.getLatLngBounds();
    }