title: How to edit existing polygon using react-google-maps using react js
body: <p>In that, I add polygon using drawing manager after that I want to edit that polygon. When I use the below code, getting the function not found error and getPath function is not working when I use that getting errors. I want to add a city with location but in that code it not working. When I use the getPath function and editable function it getting errors.</p>
  
  <pre><code>import { compose, withProps } from "recompose";
  import {
    withGoogleMap,
    GoogleMap,
    withScriptjs,
    Polygon,
  } from "react-google-maps";
  const {
    DrawingManager,
  } = require("react-google-maps/lib/components/drawing/DrawingManager");
  
  var polygon = [];
  const onAdd = (data) =&gt; {
    const path = data.getPath();
    var coordinates = [];
    for (var i = 0; i &lt; path.length; i++) {
      var pathArray = [path.getAt(i).lat(), path.getAt(i).lng()];
      coordinates.push(pathArray);
    }
    polygon = JSON.stringify(coordinates, null, 6);
  };
  
  const onEdit = (data) =&gt; {
    var pathArray = [data.latLng.lat(), data.latLng.lng()];
    console.log("edit path", pathArray);
    console.log("poly", polygonPath);
    polygonPath.push(pathArray);
  };
  const onDragEnd = (data) =&gt; {
    const path = data.getPath();
    var coordinates = [];
    for (var i = 0; i &lt; path.length; i++) {
      var pathArray = [path.getAt(i).lat(), path.getAt(i).lng()];
      coordinates.push(pathArray);
    }
    console.log("polygon", JSON.stringify(coordinates, null, 6));
  };
  let polygonPath = [];
  const MyMapComponent = compose(
    withProps({
      googleMapURL:
        "https://maps.googleapis.com/maps/api/js?key=" +
        global.config.googleApiKey +
        "&amp;v=3.exp&amp;libraries=geometry,drawing,places",
      loadingElement: &lt;div style={{ height: `100%` }} /&gt;,
      containerElement: &lt;div style={{ height: `500px` }} /&gt;,
      mapElement: &lt;div style={{ height: `100%` }} /&gt;,
    }),
    withScriptjs,
    withGoogleMap
  )((props) =&gt; {
    let addPolygonPath = [];
    if (props.isEdit) {
      polygonPath = props.isEdit.geometry.coordinates[0];
  
      addPolygonPath = props.isEdit.geometry.coordinates[0].map(
        (coordinateItem) =&gt; {
          return { lat: coordinateItem[0], lng: coordinateItem[1] };
        }
      );
    }
  
    return (
      &lt;GoogleMap defaultZoom={12} center={props.mapCenter}&gt;
        {props.isEdit ? (
          &lt;Polygon
            editable={true}
            draggable={true}
            paths={addPolygonPath}
            options={{
              strokeWeight: 2,
              fillColor: "#000",
              fillOpacity: 0.4,
              zIndex: 1,
            }}
            onMouseUp={onEdit}
            onDragEnd={onDragEnd}
          /&gt;
        ) : (
          &lt;DrawingManager
            defaultOptions={{
              drawingControl: true,
              drawingControlOptions: {
                drawingModes: ["polygon"],
              },
  
              polygonOptions: {
                strokeWeight: 2,
                fillColor: "#000",
                fillOpacity: 0.4,
                clickable: true,
                editable: true,
                zIndex: 1,
              },
            }}
            onPolygonComplete={onAdd}
          /&gt;
        )}
      &lt;/GoogleMap&gt;
    );
  });
  </code></pre>