2012-03-28 10 views
0

Ich habe eine einfache Google-Karte, die die Wegbeschreibung von NY nach LA zeigt, aber wenn es auf einer Seite lädt, möchte ich es auf einen Teil der Route vergrößern, nicht vollständig herausgezoomt, um die gesamte Route anzuzeigen NY nach LA, das Ändern des Zooms scheint nicht zu funktionieren?Vorgehensweise: Wegbeschreibungen vergrößern, beim ersten Laden mit Google Maps?

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>​ 

Antwort

1

Sie eine LatLngBounds von start_location und end_location des Beines/Schritt erstellen kann und es als Argument für 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)) 

auch preserveViewport -option von directionsDisplay bis true.

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

Verwandte Themen