Skip to content

Instantly share code, notes, and snippets.

@agisrh

agisrh/Google Maps Waypoints

Last active June 21, 2021 04:21
Show Gist options
  • Save agisrh/0681af00fd7e1d0ce8d478bff050cf4d to your computer and use it in GitHub Desktop.
Save agisrh/0681af00fd7e1d0ce8d478bff050cf4d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Google Maps Waypoints
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Waypoints (LatLng)</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key="></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var center = new google.maps.LatLng(-2.2757323,99.4425446);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
calcRoute();
}
function calcRoute() {
var request = {
// from: Blackpool to: Preston to: Blackburn
origin: "3.5901022, 98.6614652",
destination: "3.5722989, 98.7015054",
waypoints: [
{
location: "3.6314903, 98.707526",
stopover:true
},
{
location: "3.5241622, 98.62908",
stopover:true
},
{
location: "3.5441099, 98.6988368",
stopover:true
},
{
location: "3.5739006, 98.6429025",
stopover:true
},
],
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
} else {
alert("directions response "+status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div class='row'>
<div id="map" style="width: 75%; height: 500px; float:left;"></div>
<div id="panel" style="width: 20%; float:right;"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment