JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<button onclick="create()">Create New Poly</button>
<div id="map" style="width: 500px; height: 400px;"></div>

JavaScript

var map;
var listener;

var polys = [];

function createPoly() {
    
    function Poly() {
    this.markers = [];
    this.setMap(map);
    
}
Poly.prototype = new google.maps.Polyline();

Poly.prototype.addPoint = function(p) {
    var m = this.createMarker(p);
    this.markers.push(m);
    this.getPath().push(p);
}

Poly.prototype.createMarker = function(p) {
    var marker = new google.maps.Marker({
        position: p
    });
    marker.setMap(this.getMap());
    return marker;
}

   return new Poly();
}


create = function() {
    var poly = createPoly();

    if ( !! listener) google.maps.event.removeListener(listener);
    listener = google.maps.event.addListener(map, 'click', function(e) {
        poly.addPoint(e.latLng);
    });
    polys.push(poly);
}



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