Google Maps Drag and Drop with React Component

Drag&drop location markers on&off Google Maps with this React component, not just draggable markers. Internet Explorer has degraded performance but still works thanks to Mihai Valentin.

!visual explanation

Live gmap-dragdrop-react examples, takes 150sec to start on free hosting.

Full webserver on GitHub with examples.

Install

$ npm install --save gmap-dragdrop-react

Compile JS

$ gulp

JSX

import {GmapDragDrop} from 'gmap-dragdrop-react'

const CYPRESS = {lat: 49.396, lng: -123.204, title_text: "Cypress Mountain"}
const GROUSE = {lat: 49.380, lng: -123.082, title_text: "Grouse Mountain"}
const SEYMOUR = {lat: 49.367, lng: -122.948, title_text: "Mount Seymour"}
const GOOGLE_MAP_KEY = "abcdefgh_Google_Map_API_Key_ijelmen"

ReactDOM.render( google_map_key={GOOGLE_MAP_KEY}
map_locations={[CYPRESS, GROUSE, SEYMOUR]}
map_options={ init_zoom:7, onAdd:(e)=>{ console.log('added a map location') } }
/>, document.getElementById('gmap-container-id'))

google_map_key

_Required_ Type: string

The 40 character Google API Key

google_map_key={1234567890123456789012345678901234567890}

map_locations

_Required_
Type: array

Array of locations to display on the map. A location is an object consisting of at least a 'lat' and 'lng' property

map_locations={ [ ] }

map_options - attributes

Type: object

map_options={ init_zoom : 7 }

map_options - events

Type: function

map_options={ onAdd: (e)=>{
const {location_data, gmap_event} = e.gmap_params
console.log('onAdd : with this data', gmap_event._object_type)
console.dir(location_data)
return location_data
}}

Methods

import {GmapDragDrop} from 'gmap-dragdrop-react'
let gmap_drag_drop_instance = ReactDOM.render( google_map_key ={"abcdefgh_Google_Map_API_Key_ijelmen"}
map_locations={ [ {lat: 12.34, lng: 12.34} ] }
/>, document.getElementById('gmap-container-id'))
let number_locations = gmap_drag_drop_instance.numberLocations()
console.log('There are currently ' + number_markers + ' on the map')

GmapGroups

- Drag from center of hub to create a new spoke.
- Static hiking trails with linked markers

Non-Existant API Key

!google maps image when bad api key

API Key Not Yet Linked to Credit Card

!For developers only

Get a Google Maps API key at https://developers.google.com/maps/documentation/javascript/get-api-key

Restrict API Key for Production

!API restrictions

Related

- setDragImage-IE - setDragImage method support for HTML5 Drag & Drop in Internet Explorer 10+. This method is used to support marker dragging in IE.

Created by

Steen Hansen

License

MIT ©