JSFiddle - React, Tailwind, and code Playground

by Ivan Shukshin

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=geometry"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js"></script>
<div id="map-canvas" style="height:100%;width:100%;"></div>

CSS

html, body, #selected_map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

// This example adds a winding path in the bounds of a rectangle containing user's polyline
// the key function is findWindingPath(10, 20, polybounds);
// intersections with a rectangle are found using simple geometry

var map;
var poly;
var windingPoly;

var paths = [
    [
    new google.maps.LatLng(38.872886, -77.054720),
    new google.maps.LatLng(38.872602, -77.058046),
    new google.maps.LatLng(38.870080, -77.058604),
    new google.maps.LatLng(38.868894, -77.055664),
    new google.maps.LatLng(38.870598, -77.053346)]
];

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(38.8709, -77.0556),
        zoom: 17
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(52.0619767211195, 4.295717407226562),
      new google.maps.LatLng(52.07294407400174, 4.313404876709001)
    );

    //    map.fitBounds(bounds);

    poly = new google.maps.Polygon({
        paths: paths,
        strokeWeight: 3,
        fillColor: '#55FF55',
        fillOpacity: 0.5,
        editable: true
    });

    poly.setMap(map);
    
    windingPoly = new google.maps.Polyline({
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 3,
      map: map,
    });
    
    drawEdgesPoly();

    google.maps.event.addListener(poly.getPath(), 'insert_at', drawEdgesPoly);
    google.maps.event.addListener(poly.getPath(), 'remove_at', drawEdgesPoly);
    google.maps.event.addListener(poly.getPath(), 'set_at', drawEdgesPoly);
    
    if(!google.maps.Polygon.prototype.getBounds)
      google.maps.Polygon.prototype.getBounds = function() {
          var bounds = new google.maps.LatLngBounds();
          var paths = this.getPaths();    
          for (var i = 0; i < paths.getLength(); i++) {
              var path = paths.getAt(i);
              for (var j = 0; j < path.getLength(); j++) {
                 ...