Home/ Questions/Q 7725995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T05:05:55+00:00

i have a simple google map, showing the driving directions from NY to LA,

  • 0

i have a simple google map, showing the driving directions from NY to LA, but when it loads on a page i would like to have it zoom in on a part of the route, not zoomed out totally to show the entire route from NY to LA, changing the Zoom doesn’t seem to work?

jsFiddle: http://jsfiddle.net/xtian/YNcsx/

JS:

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    var neighborhoods = [];
    var VenueNames = [];
    var ShoutOut = [];
    var markers = [];
    var pics = [];
    var timeStamp = [];
    var iterator = 0; 

    var contentString;    

    var polylineOptionsActual = new google.maps.Polyline({
    strokeColor: '#ff3434',
    strokeOpacity: 0.8,
    strokeWeight: 5
    });    

function initialize() {
          var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
          directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: polylineOptionsActual});
          var myOptions = {
            zoom:5,
            strokeColor: "#000000",
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }

          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          directionsDisplay.setMap(map);

          var start = "new york, ny";
          var end = "los angeles, ca";
          var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(result);
            }
          });
      }    
$(document).ready(function() {
    initialize();
});​

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCrCbLj7KnxfLpQjh2GF5hMwZqwAzS23Tw&sensor=false"></script>    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/map-small.js"></script>
  </head>
  <body>
      <div class="container-front">
          <div class="map-container">
            <div id="map_canvas" style="width: 430px; height: 360px; border: 6px solid #024d91;"></div>
        </div>
    </div>
  </body>
</html>​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You may create a LatLngBounds from start_location and end_location of the leg/step and use it as argument for map.fitBounds()

    map.fitBounds(new google.maps.LatLngBounds(result.routes[0].legs[0].steps[0].start_location)
                                     .extend(result.routes[0].legs[0].steps[0].end_location))

    also set the preserveViewport-option of directionsDisplay to true.

    http://jsfiddle.net/doktormolle/BRQff/

    • 0