Googleマップのマウスクリックでポリゴンを描く方法

Question

ユーザーがGoogleマップをハードコーディングするのではなく、そのポリゴンをクリックしようとしています。 https://jsfiddle.net/vL6qpn4w/4/

どれsugesstion：
それは.This作成することができませんが、私のコードは

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

フィドルのですか？

Answer 1

ゴット・ソリューション：

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