gmap-dragdrop-react

v1.1.2

Published

7 months ago

Drag and Drop React Google Map component

Downloads

0High
0Medium
0Low

steenhansen

google maps react drag and drop drag drop

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