title: react-google-maps pass props on marker click
body: <p>I am trying to integrate "react-google-maps" in my app to display a map.  I am having the hardest time understanding their system for markers.   </p>
  
  <p><a href="https://tomchentw.github.io/react-google-maps/#marker" rel="nofollow noreferrer">https://tomchentw.github.io/react-google-maps/#marker</a></p>
  
  <p>I am able to display my map and get all of my markers displaying correctly.  The next step is where I am having problems.  I need to be able to click on each marker and know know what marker is being clicked on.  I have commented the following code to show what props I am trying to show in my console for now.  I think that I just need to pass another argument in the event but I have no idea how to do that.  Truthfully right now I believe I am passing the event listener but I not even fully sure what I am looking at when I log that 'e' variable.  </p>
  
  <p>You can see what I have so far in my github.  If you click on the marker you will see what I am logging.   </p>
  
  <p><a href="https://joweber123.github.io/take-me-there/login/James" rel="nofollow noreferrer">https://joweber123.github.io/take-me-there/login/James</a></p>
  
  <p>Please help, I can't find this information discussed anywhere else.  Thank you so so so much</p>
  
  <pre><code>    import React, { Component } from 'react';
      import { withGoogleMap, GoogleMap, Marker, } from "react-google-maps";
      import { compose, withProps } from "recompose";
  
      class List extends Component {
  
        //I eventually will use this information to set state and all of that, but for now I just don't understand how to pass information to this function from my marker on onClick
  
        handleMarkerClick(e){
          console.log(e);
        }
        render(){
  
          const { compose, lifecycle} = require("recompose");
  
          const {
            withGoogleMap,
            GoogleMap,
            Marker,
          } = require("react-google-maps");
  
          const MapWithAMarker = compose(
          withGoogleMap
        )(props =&gt;
  
          &lt;GoogleMap
            defaultZoom={8}
            defaultCenter={{ lat: Number(`${this.props.locations[Object.keys(this.props.locations)[Object.keys(this.props.locations).length-1]].location.lat}`), lng: Number(`${this.props.locations[Object.keys(this.props.locations)[Object.keys(this.props.locations).length-1]].location.lng}`) }}
            locations={this.props.locations}
          &gt;
          {
            Object
            .keys(this.props.locations)
            .map(key =&gt;
            &lt;Marker
              key={key}
              position={{ lat: Number(`${this.props.locations[key].location.lat}`), lng: Number(`${this.props.locations[key].location.lng}`) }}
              locations={this.props.locations[key]}
              //I want to be able to pass the information that is stored in my locations prop here, but I have no idea how to do that.  
              onClick={props.onMarkerClick}
            /&gt;
          )
            }
          &lt;/GoogleMap&gt;
        );
  
        return (
          &lt;div className = "location-list one-third column center border-main full-height"&gt;
              &lt;MapWithAMarker
                loadingElement={&lt;div style={{ height: `100%` }} /&gt;}
                containerElement={&lt;div style={{ height: `400px` }} /&gt;}
                mapElement={&lt;div style={{ height: `100%` }} /&gt;}
                locations={this.props.locations}
                //I am not even really sure what I am doing here.  What gets printed out in my console gives me some information but what I really want to be able to do is to pass the locations props of my specific marker and have access to that information
                onMarkerClick={(e)=&gt;this.handleMarkerClick(e)}
              /&gt;
          &lt;/div&gt;
        );
      }
      }
  
  
      export default List;
  </code></pre>