React-google-maps: get path of newly plotted polygon

Created on 4 Jul 2018  路  3Comments  路  Source: tomchentw/react-google-maps

Hi I've been building a Google Map Editor with the Drawing Manager, god it was difficult.

I think the hardest was just working out the flow within the React eco-system.

One last bit, probably easy but please forgive me, I'm trying to get the path of the new plotted polygon.

I've added a listener to the DrawingManager,

  <DrawingManager
    options={{
      drawingControl: props.drawingMode,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT,
        drawingModes: [
          google.maps.drawing.OverlayType.MARKER,
          google.maps.drawing.OverlayType.POLYGON
        ],
      }
    }}
    onMarkerComplete={props.onMarkerComplete}
    onPolygonComplete={props.onPolygonComplete}
    drawingMode={props.drawingMode
          ? window.google.maps.drawing.OverlayType.MARKER
          : null}
  />

So on finishing the polygon it fires props.onPolygonComplete which fires this and ref is attached to that new Polygon

onPolygonComplete: ref => {
      // need to get polygon path
},

My final problem is to get the path array of that polygon.

I got the marker position via

 newMarker.myLat = ref.position.lat()
 newMarker.myLng = ref.position.lng()

Do you know how to get get the path array?

Looked in the docs and a bit stuck, any help greatly appreciated.

Most helpful comment

onPolygonComplete = poly => {
    const polyArray = poly.getPath().getArray();
    let paths = [];
    polyArray.forEach(function(path){
      paths.push({latitude:path.lat(), longitude: path.lng()});
    });
 }

All 3 comments

onPolygonComplete = poly => {
    const polyArray = poly.getPath().getArray();
    let paths = [];
    polyArray.forEach(function(path){
      paths.push({latitude:path.lat(), longitude: path.lng()});
    });
 }

Excellent, thanks

Was this page helpful?
0 / 5 - 0 ratings