Drag and Drop Markers to edit position ?

[jnorvell]

Has anyone had any success with dragging and dropping an existing Marker on the map in order to "move", i.e. relocate the marker?

[jnorvell]

Here is a stackoverflow question that someone posted, but it is not reactjs or this library.

https://stackoverflow.com/questions/5688745/google-maps-v3-draggable-marker

[jnorvell]

I was able to get it to work using a couple of pieces:

1. In the code where you create your <Marker> elements, add the draggable={true} property.
2. Add the ref={} property, and notice how we can use the callback handler form, this way it passes the React component as the node parameter, and we can get a handle to the google maps Marker by referencing the .marker property.
3. To the google maps marker, we add an dragend event listener.
4. When the dragend event listener fires, we can get the new latitude-longitude position by calling .getPosition() and then lat() and lng() to get the new values.
5. In my code, I then make a REST API call to my own backend to persist the location's new position.

              <Marker
                  key={l.id}
                  className="eventMarker"
                  map={map}
                  ref={(node) => {
                        window.google.maps.event.addListener(
                           node.marker,
                           "dragend",
                           (event) => {
                              const lat = node.marker.getPosition().lat();
                              const lng = node.marker.getPosition().lng();

                              const edited = {
                                 ...l,
                                 latitude: lat,
                                 longitude: lng,
                              };

                              updateMapMarkerAPI(edited)
                                 .then(() => {
                                    Toast.show({
                                       content: `Marker location saved`,
                                       duration: 3000,
                                    });
                                 })
                                 .catch((err) => {
                                    Toast.show({
                                       content: `Failed to update marker location, err=${err.code}`,
                                       icon: "fail",
                                       duration: 3000,
                                    });
                                 });
                           }
                        );
                     } else {
                        map.delete(l.id);
                     }
                  }}
                  draggable={true}
                  position={{ lat: l.latitude, lng: l.longitude }}
                  label={l.description}
                  title={l.description}
                  // options={{anchorPoint: {x: 0, y: -50}}}
                  icon={{
                     url: makeMarkerIcon(l.type),
                     labelOrigin: new window.google.maps.Point(15, 30),
                     anchor: new window.google.maps.Point(8, 10),
                     scaledSize: {
                        width: 22,
                        height: 22,
                        widthUnit: "px",
                        heightUnit: "px",
                     },
                  }}
                  clusterer={clusterer}
                  onClick={() => {
                     onEventMarkerClick(l.id);
                  }}
               />