JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.1/jsts.min.js"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/javascript.util/master/dist/javascript.util.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="height: 1000px; width: 1200px;"></div>
JavaScript
var directionsService, directionsDisplay;
var map;
var polyline, mainPath;
var routePolygon = null;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 49.8268237, lng: 24.040374},
streetViewControl: false,
mapTypeControl: false,
scaleControl: true,
zoomControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer();
drawRoute();
}
function drawRoute(waypoints) {
if (polyline != undefined) {
polyline.setMap(null);
}
directionsService.route({
origin: "Strasbourg",
destination: "Paris",
waypoints: [{location: "Zaragoza"}, {location: "Limoges"}, {location: "Marseille"}, {location: "Seville"}],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
optimizeWaypoints: false
}, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
directionsDisplay.setMap(map);
mainPath = result.routes[0].overview_path;
if (mainPath){
drawPoligon();
}
} else {
alert("route cannot be calculated because of " + status);
}
});
}
function drawPoligon(){
var overviewPath = mainPath;
var overviewPathGeo = [];
var polygonalPath = [];
var lDistance = 0.00899928005759539 * 5 *2;
for (var i = 0; i < overviewPath.length; i++) {
overviewPathGeo.push([overviewPath[i].lat(), overviewPath[i].lng() ]);
}
var geoInput = googleMaps2JTS(overviewPath);
var geometryFactory = new jsts.geom.GeometryFactory();
var shell = geometryFactory.createLineString(geoInput);
var polygon = shell.buffer(lDistance);
if (routePolygon && routePolygon.setMap) routePolygon.setMap(null);
routePolygon = new...