How to draw polygon on mouse click of google maps

Question

I am trying to draw polygon when user click on google map rather than hardcoding it.
Unable to create it .This is my code

function initMap() {
       var  mapDiv = document.getElementById('map');
        var mapOptions= {
          center: new google.maps.LatLng( 23.09024, -90.417924),
          zoom: 7,
          mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map=new google.maps.Map(mapDiv,mapOptions)
          google.maps.event.addListener(map, 'click', function( event ){

          var Latitude=event.latLng.lat();
          var Longitude=event.latLng.lng(); 

          var destinations=new google.maps.MVCArray();
          destinations.push(new google.maps.LatLng(Latitude,Longitude));
          console.log(destinations)
          var polygonOptions={path:destinations,strokeColor:"#ff0000",fillColor:"00ff00"};
          var polygon=new google.maps.Polygon(polygonOptions);
          polygon.setMap(map);
          });
      }

fiddle: https://jsfiddle.net/vL6qpn4w/4/

Any sugesstion?

Answer 1

I've modified @user7397787 answer to allow draggablemarkers.

var poly;
var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: { lat: 41.879, lng: -87.624 }  // Center the map on Chicago, USA.
    });

    poly = new google.maps.Polyline({
        strokeColor: '#00DB00',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        fillColor: 'green',
        fillOpacity: 0.05
    });
    poly.setMap(map);

    map.addListener('click', addLatLng);
}


function addLatLng(event) {
    var path = poly.getPath();
    if (path.length == 2) {
        var polygonOptions = { path: path, strokeColor: "#00DB00", fillColor: "green" };
        var polygon = new google.maps.Polygon(polygonOptions);
        polygon.setMap(map);
    }

    path.push(event.latLng);
    var index = -1;

    function dragStartEvent(event) {
        const arr = path.getArray();
        index = arr.indexOf(event.latLng);

    }
    function dragEndEvent(event) {
        if (index > -1) {
            path.setAt(index, event.latLng);
        }
    }
    var marker = new google.maps.Marker({
        position: event.latLng,
        title: '#' + path.getLength(),
        map: map,
        draggable: true,
    });
    marker.addListener('dragstart', dragStartEvent);
    marker.addListener('dragend', dragEndEvent);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Answer 2

Got Solution:

<script>

      var poly;
      var map;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
        });

        poly = new google.maps.Polyline({
          strokeColor: '#00DB00',
          strokeOpacity: 1.0,
          strokeWeight: 3,
          fillColor: 'green',
          fillOpacity: 0.05
        });
        poly.setMap(map);

        map.addListener('click', addLatLng);
       }


      function addLatLng(event) {debugger
        var path = poly.getPath();
        if(path.length==4){
          var polygonOptions={path:path,strokeColor:"#00DB00",fillColor:"green"};
          var polygon=new google.maps.Polygon(polygonOptions);
          polygon.setMap(map);
          }

          path.push(event.latLng);
          var marker = new google.maps.Marker({
          position: event.latLng,
          title: '#' + path.getLength(),
          map: map
        });
      }
    </script>