JSFiddle - React, Tailwind, and code Playground

by bartek

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('continue')">Continue Polyline</button>
<button onclick="initFeature('new')">New Polyline</button>
<button onclick="initFeature('clean')">Clean Map</button>
<button onclick="initFeature('restore')">Restore Polylines</button>

JavaScript

var map;
var listener;
var polys = [];
var markers = [];
var poly;

function createMarker(p) {
    var marker = new google.maps.Marker({
        map: map,
        position: p,
        draggable: true
    });

    google.maps.event.addListener(marker, "drag", function() {
        for (var i = polys.length - 1; i >= 0; i--) {
            var l = polys[i];
            for (var j = l.markers.length - 1; j >= 0; j--) {
                var m = l.markers[j];
                if (m == marker) {
                    l.getPath().setAt(j, m.getPosition());
                }
            }
        }
    });

    return marker;
}

initFeature = function(type) {
    switch (type) {
    case "continue":

        break;

    case "new":
        if ( !! listener) google.maps.event.removeListener(listener);
        console.log(polys.length);
        if (polys.length > 0) {
            markers = [];
            poly = null;
        }

        poly = new google.maps.Polyline();
        poly.setMap(map);

        listener = google.maps.event.addListener(map, 'click', function(e) {

            var marker = createMarker(e.latLng);
            markers.push(marker);

            poly.markers = markers;

            var path = poly.getPath();
            path.push(e.latLng);
        });

        polys.push(poly);
        break;
    case "clean":
        break;

    case "restore":
        break;

    }
}

$(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
    });
});