-1
  1. I did a google map with a list of resellers using "react-google-maps"
  2. The markers properly looping and showing in the map
  3. How can I list the 'Marker'/'Resellers' in the Map into a list(UL) too, Also the list(li) click should pop the info window?

This is the one I used, https://gist.github.com/jwo/43b382fc60eb09d3a415c9953f4057f8

import React, { Component } from "react"
import { compose } from "recompose"
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow, Listing
} from "react-google-maps"
const MapWithAMarker = compose(withScriptjs, withGoogleMap)(props => {
  const listStyle = {
    width: '250px',
    position: "relative"
  }
  return (
    <div style={{ position: "relative" }}>
      <GoogleMap defaultZoom={4} defaultCenter={{ lat: 56.263920, lng: 9.501785 }}>
        {props.markers.map(marker => {
          if (marker.lat != null) {

            const onClick = props.onClick.bind(this, marker)
            return (
              <Marker
                key={marker.customerNumber}
                onClick={onClick}
                position={{ lat: parseFloat(marker.lat), lng: parseFloat(marker.lng) }}
              >
                {props.selectedMarker === marker &&
                  <InfoWindow>
                    <div>
                      <h1> {marker.name}</h1>
                      <br />
                      {marker.address}
                      <br />
                      {marker.zipcode} {marker.city}
                      <br />
                      Telephone: {marker.phone}
                    </div>
                  </InfoWindow>}

{/* List resellers here, so info window can be reused I guess, not sure */}
              </Marker>

            )
          }         
        })}
      </GoogleMap>

    </div>
  )
})
export default class ResellerGoogleMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showingInfoWindow: false,
      selectedMarker: {},
      selectedPlace: {}
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(marker, event) {
    console.log(this.props)
    this.setState({
      selectedMarker: marker
    });
  }

  render() {

    return (
      <div style={{ padding: "24px 13px 2px 2px" }}>
        <input type="button" value="My Location" style={{ marginBottom: "20px" }} onClick={(e) => this.onBtnClick()} />

        <MapWithAMarker
          selectedMarker={this.state.selectedMarker}
          markers={this.props.resellerData}
          onClick={this.handleClick}
          googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%`, padding: `61px 55px 55px 55px` }} />}
          containerElement={<div style={{ height: `800px` }} />}
          mapElement={<div style={{ height: `511px` }} />}
        />
      </div>
    );
  }
}

Expecting

a Google map/
Markers of 'resellers'/ List the resellers in a list too/ On click of list item should populate info window like when we click on Markers/ First two points are working, Need a hand on the rest, Please help somebody

geocodezip
  • 158,664
  • 13
  • 220
  • 245
Nimisha K.John
  • 9

1 Answers1

0

Thank you all for your time, I found the solution Simply we can add the following line of code just after the infowindow close tag

<a onClick={onClick}>{marker.name}</a>
Nimisha K.John
  • 9