Gmap-dragdrop-react NPM

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(<GmapDragDrop
	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(<GmapDragDrop
			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')