0

i'm using the google maps react component to show a simple map with markers...and a menu to filter the results...when I click a marker i'm able to show the info window...but when I click on the menu list I can't seem to figure out how to open the corresponding marker's InfoWindow? How do I get a reference to a specific marker?

Here's my APP

state = {
currentPlace: '',
currentMarker: {},
markerShowing: false,
};

onMarkerClick = (props, marker) => {
this.setState({
  currentPlace: props,
  currentMarker: marker,
  markerShowing: true,
});
}

render() {

const { currentMarker, currentPlace, clubs, markerShowing } = this.state;

return (
  <div>
    <main>
      <Menu
        clubs={clubs}
      />

      <GoogleMap
        clubs={clubs}
        markerInfo={this.onMarkerClick}
        currentMarker={currentMarker}
        currentPlace={currentPlace}
        markerShowing={markerShowing}
        />
    </main>
  </div>
);
}
}

Here's the GoogleMap Component 

const GoogleMap = (props) => {

const { google, clubs, currentMarker, currentPlace, 
markerShowing } = props;

const newClubList = clubs
  .filter(club => club.name.toLowerCase().indexOf(filterTerm.toLowerCase()) >= 0)
  .map(club => {
    return (
      <Marker
        key={club.name}
        title={club.title}
        name={club.name}
        position={club.position}
        onClick={props.markerInfo.bind(this)}
      />
    )
  });

return (
  <Map
    google={google}
    initialCenter={{
      lat: 34.098051,
      lng: -118.327246
    }}
    zoom={15}
    style={{height: '100%', width: '100%'}}

    {newClubList}

  </Map>
   );
  }

Here's my Menu Component

When I click on the Li...I essentially want to call the onMarkerClick function from my app...passing the props (which I have) and the marker (Which I have no clue how to get!) 

  const Menu = (props) => {

  const { clubs } = props;

   const newClubList = clubs
  .filter(club => club.name.toLowerCase().indexOf(filterTerm.toLowerCase()) >= 0)
  .map(club => {
    return (
      <li key={club.name} className='item' onClick={}>{club.name}</li>
    )
  });

return (
  <nav id='menu' className={toggleMenu}>
      <ul>
        {newClubList}
      </ul>
  </nav>
);
}

Here's the full repo...https://github.com/ctaminian/neighborhood_map

Thanks in advance

ctaminian
  • 23
  • 8
  • newClubList is the array storing all of your markers (at least, the jsx of it). You should be assigning a unique property to each so you can find the reference to the specific marker you want later. I looked at the docs for this react component, as well, but the info isn't apparent in my short search. This maye help though: https://stackoverflow.com/questions/48588302/react-google-maps-how-does-one-get-marker-position – Devin Fields Jul 24 '18 at 23:39
  • basically, use ref prop to marker to keep track of all of them you create. When you want a marker to manipulate, loop over array of markers searching for unique property, then 'marker.getPosition()' or whatever. – Devin Fields Jul 24 '18 at 23:40
  • Thanks for the reply...I have seen the question you linked but didn't make sense of it....with your explanation it makes sense! I'll give that a shot...thanks! @DevinFields – ctaminian Jul 25 '18 at 02:47

0 Answers0