CODEWITHSUNDEEP
javascripthtmlreactjsgoogle-mapsreact-google-maps
Coolguy
Coolguy

Reputation: 2285

How to do getPaths of polygon from the react-google-map?

Below is my coding:

const SiteGoogleMap = compose(
withProps({
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />
}),
withScriptjs,
withGoogleMap
)((props) =>
<GoogleMap
defaultZoom={18}
defaultCenter={{ lat: 3.1314067, lng: 101.6285082 }}
>
{props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} onClick={props.onMarkerClick} />}

<DrawingManager
  defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
  defaultOptions={{
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON
      ],
    }
  }}
  onPolygonComplete={(value) => console.log(getPaths())}
/>
</GoogleMap>

I'm trying to get the path of the polygon drawn which will give me the coordinates of the paths. But it gives undefined on console.log. Do you guys know why?

Upvotes: 1

Views: 3150

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59388

Since onPolygonComplete event is mapped to polygoncomplete of DrawingManager class, the value parameter represents Polygon object: 

onPolygonComplete={(value) => console.log(getPaths())}
                    ^^^^^
                    polygon object

that could be passed into getPaths function:

onPolygonComplete={(value) => console.log(getPaths(value))}

and then the coordinates of the polygon drawn could be printed like this:

function getPaths(polygon){
  var coordinates = (polygon.getPath().getArray());
  console.log(coordinates);
}

Upvotes: 2

Related Questions