JSFiddle - React, Tailwind, and code Playground

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 = [];

create = function () {
  var poly = new Poly();

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

function Poly() {
  google.maps.Polyline.call(this);
  this.markers = [];
  this.setMap(map);
}
Poly.prototype = Object.create(google.maps.Polyline.prototype);

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;
}

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