Initializing drawing

[nedimcimpo]

Is there a "native" way of initializing drawing example with polygon? I have array of latitude and longitude information that I need to convert into editable drawing polygon.

[mrMetalWood]

To add one or more initial shapes in the drawing example you could add an useEffect in the undo-redo-control.tsx file and add initial shapes to the map and then dispatch the "set" action. You would also need to add the relevant event listeners to when the shape changes. It does not feel very "native" ;) but it should work.

For a polygon it could look something like this:

https://github.com/visgl/react-google-maps/blob/main/examples/drawing/src/undo-redo-control.tsx#L33

  // add initial shapes to map
  useEffect(() => {
    if (!map || !drawingManager) return;

    const triangleCoords = [
      {lat: 25.774, lng: -80.19},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757},
      {lat: 25.774, lng: -80.19}
    ];

    const bermudaTriangle = new google.maps.Polygon({
      paths: triangleCoords,
      draggable: true,
      editable: true,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map
    });

    google.maps.event.addListener(bermudaTriangle, 'mouseup', () => {
      if (overlaysShouldUpdateRef.current) {
        dispatch({type: DrawingActionKind.UPDATE_OVERLAYS});
      }
    });

    dispatch({
      type: DrawingActionKind.SET_OVERLAY,
      payload: {
        type: google.maps.drawing.OverlayType.POLYGON,
        overlay: bermudaTriangle
      }
    });
  }, [map, drawingManager, dispatch]);

[nedimcimpo]

Works like charm. Thx.