react-google-maps pass props on marker click

Question

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.

https://tomchentw.github.io/react-google-maps/#marker

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.

You can see what I have so far in my github. If you click on the marker you will see what I am logging.

https://joweber123.github.io/take-me-there/login/James

Please help, I can't find this information discussed anywhere else. Thank you so so so much

    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 =>

        <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}
        >
        {
          Object
          .keys(this.props.locations)
          .map(key =>
          <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}
          />
        )
          }
        </GoogleMap>
      );

      return (
        <div className = "location-list one-third column center border-main full-height">
            <MapWithAMarker
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `400px` }} />}
              mapElement={<div style={{ height: `100%` }} />}
              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)=>this.handleMarkerClick(e)}
            />
        </div>
      );
    }
    }


    export default List;

Answer 1

I was able to figure it out! I was just passing the event listener before so of course it didn't contain any of the information that I needed. I also didn't need to pass it its parent as just having it trigger its own event was enough. Thanks everyone for having a look at this.

onClick={()=> this.props.handleMarkerClick(this.props.locations[key])}

I guess I wasn't asking myself the right question but once I found these two answers I understood much better what I needed to do.

React - Passing props to child onClick

Pass props to parent component in React.js

Answer 2

Can you show what is contained in this.props.locations? Usually you want to map the locations and each location should have some kind of id field. Instead of mapping through the keys you should map through the array of locations. That way you can pass the id (or even the coordinates if they are in the location object itself, which I presume they do) when the onClick function is called.