CODEWITHSUNDEEP
google-maps-api-3bounds
Steven
Steven

Reputation: 19425

How can I find the bounds of a google map route?

I'm creating a route in Google maps with a data object I have stored:

        routeData = {
            origin: 'address A',
            destination: 'address B',
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            waypoints: [obj, obj, obj],
            optimizeWaypoints: false
        };

Because I have other objects on this map as well, I have set optimizeWaypoints: false.

Then I draw the route using this code:

        // Instantiate a directions service.
        var directionsService = new google.maps.DirectionsService;

        // Create a renderer for directions and bind it to the map.
        directionsDisplay = new google.maps.DirectionsRenderer({
            preserveViewport: true,
            suppressMarkers: true,
            map: map
        });

        directionsService.route(routeData, function(result, status) {
            directionsDisplay.setDirections(result);
        });

directionsDisplay is a global variable.

When all objects has been drawn on the map, I go through them all to get the bounds.

fitMapObjectBounds: function(mapData){
    var bounds          = new google.maps.LatLngBounds();
    var marker, circle, route  = null;
    var fitTheBounds    = false;

    // Marker
    $(mapData.markers).each(function(key, value){
        marker = new google.maps.Marker(value);
        bounds.extend(marker.getPosition());
        fitTheBounds = true;
    });

    // Circles
    $(mapData.circles).each(function(key, value){
        circle = new google.maps.Circle(value);
        bounds.union(circle.getBounds());
        fitTheBounds = true;
    });

    if(fitTheBounds == true) {
        map.fitBounds(bounds);
    }

}

My question is, how do I get the bounds of my route? I can't really find a good example of this.

UPDATE
So I have added this code in my fitMapObjectBounds functions, but it's not working:

directionsService = new google.maps.DirectionsService;
directionsService.route(mapData.routeStreet, function(result, status) {
    directionsDisplay.setDirections(result);
    bounds.union(directionsDisplay.getDirections().routes[0].bounds);
});

Upvotes: 1

Views: 3165

Answers (1)

geocodezip
geocodezip

Reputation: 161334

The bounds of the route displayed by default (the first one returned) is 

directionsDisplay.getDirections().routes[0].bounds

documentation

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var routeData = {
    origin: 'New York, NY',
    destination: 'Philadelphia, PA',
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    waypoints: [],
    optimizeWaypoints: false
  };
  // Instantiate a directions service.
  var directionsService = new google.maps.DirectionsService;

  // Create a renderer for directions and bind it to the map.
  directionsDisplay = new google.maps.DirectionsRenderer({
    preserveViewport: true,
    suppressMarkers: true,
    map: map
  });

  directionsService.route(routeData, function(result, status) {
    directionsDisplay.setDirections(result);
    map.fitBounds(directionsDisplay.getDirections().routes[0].bounds);
  });
  // fitObjectBounds()
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Upvotes: 2

Related Questions