Description:
In this example we explain that how to create route map with multiple locations on Bing Map using JavaScript. Or plotting multiple routes in Google/Bing Maps in our web application or in Dynamic CRM Web Resource. Or Directions using Bing maps with multiple locations on Bing Map using JavaScript.
So here we demonstrate
that how to get directions in Bing Map with multiple location. Or how to get
direction from one source to multiple destination on Bing Map. Or create route
with one source to multiple destination on Bing Map using JavaScript.
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'>
var
map, directionsManagers = [];
function
GetMap() {
map = new
Microsoft.Maps.Map('#myMap', {
center: new
Microsoft.Maps.Location(47.7, -122.14),
zoom: 10
});
//Load
the directions module.
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
getRoute('Kirkland, WA', 'Bothell
, WA', 'blue');
getRoute('Woodinville, WA', 'Duval,
WA', 'green');
getRoute('Redmond, WA', 'Sammamish,
WA', 'orange');
});
}
function
getRoute(start, end, color) {
var
dm = new
Microsoft.Maps.Directions.DirectionsManager(map);
directionsManagers.push(dm);
dm.setRequestOptions({
routeMode:
Microsoft.Maps.Directions.RouteMode.driving
});
dm.setRenderOptions({
autoUpdateMapView: false,
drivingPolylineOptions: {
strokeColor: color,
strokeThickness: 3
}
});
dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address:
start }));
dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: end
}));
dm.calculateDirections();
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=You
Bing Map Key Here' async defer></script>
</head>
<body>
<div id="myMap" style="position:relative;width:800px;height:600px;"></div>
</body>
</html>
0 comments:
Post a Comment