The Point of this React component is to enable drag-and-drop on-and-off a Google map, not to drag a marker inside a Google map.


DYNAMIC SINGLE PAGE WITH CODE

Drag markers between maps


⇆

Locations Saved on Destroy

ACTIVITIES SINGLE PAGE WITH CODE

Can add new spokes by dragging from the below icons when they are visible on the map.





Steveston


Sasamat Lake


North Shore


Stanley Park
Add new locations on the map connected to the "North Shore" hub by dragging from the "water" icon in the center of hub.


Drag Here to Delete


Clear All 0


Resize Map


Hide Info


Show Info


Drag Here to Modify
Lat
Lng
Title

Activity
Id
Svg
Outing
Color
Extra



EVENTS SINGLE PAGE WITH CODE


Dragging pins on the map show distance.

Map events are logged in the console.

The below pins are plain un-draggable icons.









HIKES SINGLE PAGE WITH CODE

Alouette Mountain Hike
Bastion Hike
Burke Mountain Hike
Swan Falls Hike
Clear All 0
Resize Map
Hide Info


Show Info

MALLS SINGLE PAGE WITH CODE

Drag and drop pins inside the map, onto the map, and off of the map to the "Delete" icon

Pacific Mall
Oakridge
Park Royal
Capilano
Royal City
Richmond Centre
Lansdowne
Aberdeen
Lougheed
Brentwood
Metropolis
Guilford
Central City
Coquitlam Centre
Drag Mall Here to Delete

SIMPLE SINGLE PAGE WITH CODE


Drag red skier icons to the text area below, or a text editor.