MicheleBertoli / react-gmaps

A Google Maps component for React.js
http://react-gmaps.herokuapp.com/
MIT License
317 stars 68 forks source link

Can't retrieve data from markers/circles #122

Closed benji011 closed 6 years ago

benji011 commented 6 years ago

When creating multiple Circles &/or Markers, we can pass events like this:

for (var i = 0; i < data.length; i++) {
        dataArr.push(<Circle
                        key={'data_' + i}
                        lat={data[i].latitude}
                        lng={data[i].longitude}
                        onMouseOver={(ev) => this.onMouseOver(ev)}
                        ...
                        onClick={this.onClick}>
                      </Circle>);

using onMouseOver(ev), we can pass event data but there is no useful data being passed at all. How can I retrieve something like the ID of this circle/marker?

I've tried passing 'this' in as an argument but doing so only returns

ProxyComponent {props: {…}, context: {…}, refs: {…}, updater: {…}, __reactstandin__proxyGeneration: 6, …}

REACT_HOT_LOADER_RENDERED_GENERATION:6
context:{}
props:{user: {…}, taskList: Array(8), defaultLat: 00.000, defaultLng: 000.000, …}
refs:{}
state:null
updater:{isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
__reactstandin__isMounted:true
__reactstandin__proxyGeneration:6
_reactInternalFiber:FiberNode {tag: 2, key: null, type: ƒ, stateNode: ProxyComponent, return: FiberNode, …}
_reactInternalInstance:{_processChildContext: ƒ}
isMounted:(...)
replaceState:(...)
__proto__:Top

refs is empty, and props has nothing to do with the circle being hovered over. How can we retrieve of this specific marker?

EDIT:

Even if its a single marker/circle, data cannot be retrieved. How can we work around this?

MicheleBertoli commented 6 years ago

Hello @benji011, this library is a React wrapper around the Google Maps API so that all the functionality match 1:1. The onMouseOver event, receives LatLng as described in the official documentation.