JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map" style="width: 500px; height: 400px;"></div>
<button onclick="initFeature('draw')">New Polyline</button>
<button onclick="initFeature('clean')">Clean Map</button>
<button onclick="initFeature('restore')">Restore Polylines</button>

JavaScript

var map;
var listener;
var polyLines = [];
var newPoly;


$(function() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(48.864715, 10.546875),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);

var path = [];

var data =[{"direction":"2","position":"246","name":"Zhytnyi...