У меня есть простая карта Google, показывающая направления движения из Нью-Йорка в Лос-Анджелес, но когда он загружается на странице, я хотел бы, чтобы он увеличивал часть маршрута, а не уменьшал масштаб полностью, чтобы показать весь маршрут из Нью-Йорка в Лос-Анджелес, кажется, что изменение масштаба не работает?
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>