(React ES6) Adding Modal Trigger to Map Markers Dynamically

Question

So I am trying to dynamically create Modals and Markers from the same data in React in ES6 using react-bootstrap, and having the markers be the triggers for the modals. Right now I keep calling the same modal

Code of page that generates markers/modals:

class SimpleMapPage extends React.Component {
    //shouldComponentUpdate = shouldPureComponentUpdate;
    constructor(props) {
        super(props);
        this.state = {
            userPosition: {lat: 40.7128, lng: -74.0059},
            defaultCenter: {
                lat: 40.7128,
                lng: -74.0059
            },
            zoom: 12,
            showModal: false
        }
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
        this._onChildClick = this._onChildClick.bind(this);

    }

    close() {
        this.setState({ showModal: false });
      }

    open() {
        this.setState({ showModal: true });
      }


    _onChildClick(key, childProps){
      console.log('ow');
      this.setState({ showModal: true});
      const markerId = childProps.marker.get("id");
      const index = this.props.markers.findIndex(m => m.get('id') === marker.name);
      if (this.props.onChildClick) {
        this.props.onChildClick(index);
      }
    }



    componentDidMount() {
        this.getCurrentPosition();
    }

    markers(){
        return Markers.find().fetch();
    }
    render() {
        console.log(this.state.userPosition)



        return (
            <div style={divStyle}>
                <GoogleMap bootstrapURLKeys={{
                    key: 'AIzaSyDAQIZigb4sd4EIMVeDZ1jxdx8tH9QRyEM',
                    language: 'us'
                }}
                    center={this.state.userPosition}
                    zoom={this.state.zoom}
                    defaultCenter={this.state.defaultCenter}
                    defaultZoom={this.state.zoom}
                    hoverKey= "lol"
                    hoverDistance={40 / 2}
                    visibleRowFirst= "-1"
                    visibleRowLast= "-1"
                    hoveredRowIndex= "-1"
                    onChildClick={this._onChildClick}

                    >

                      {this.markers().map( (marker) => {
                        return <MyGreatPlace key={marker.name} lat={marker.lat} lng={marker.lng}  hover="lol" />
                      })}

                      {this.markers().map( (marker) => {
                      return <Modal show={this.state.showModal} onHide={this.close} id={marker.name}>
                        <Modal.Header closeButton>
                          <Modal.Title>{marker.name}</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                          <h4>{marker.description}</h4>
                          <a href={"https://www.google.com/maps/dir/Current+Location/"+marker.lat+'+'+marker.lng} target="_blank">Click Here for Directions</a>
                        </Modal.Body>
                      </Modal>
                        })}

                      <MyGreatPlace lat={this.state.userPosition.lat} lng={this.state.userPosition.lng} text="You" />
                </GoogleMap>
            </div>
        );
    }
}

SimpleMapPage.propTypes = {
  center: PropTypes.array, // @controllable
  zoom: PropTypes.number, // @controllable
  hoverKey: PropTypes.string, // @controllable
  clickKey: PropTypes.string, // @controllable
  onCenterChange: PropTypes.func, // @controllable generated fn
  onZoomChange: PropTypes.func, // @controllable generated fn
  onHoverKeyChange: PropTypes.func, // @controllable generated fn

  greatPlaces: PropTypes.array
};

Here is the MyGreatPlaces component being passed as child to create the map markers:

   export default class MyGreatPlace extends Component {
      constructor(props) {
    super(props);

      this.state= {
          hover: PropTypes.bool,
          text: PropTypes.string
    }
  }

  render() {
    const style = this.props.hover ? greatPlaceStyleHover : greatPlaceStyle;

    return (
       <div className="hint" style={style}>
          <div>{this.props.text}</div>
          <div style={{width: 80}} className="hint__content">
          </div>
       </div>
    );
  }
}

Show source
| javascript   | reactjs   | ecmascript-6   | es6-class   | google-maps   2016-10-19 19:10 1 Answers

Answers to (React ES6) Adding Modal Trigger to Map Markers Dynamically ( 1 )

  1. 2016-10-21 18:10

    Okay, so I had to run the _onclick method through the GoogleMap child component, the Marker, in order to set up data-target: to be added dynamically to each Marker child (and to reference its own method)

Leave a reply to - (React ES6) Adding Modal Trigger to Map Markers Dynamically

◀ Go back