Google map

Folder path: /src/containers/map/GoogleMap

If you want to render a map like the following image

Then The code should be like this.

          <GoogleMapReact
            defaultZoom={this.props.zoom}
            bootstrapURLKeys={{
              key: API_KEY,
            }}
            onBoundsChange={this.boundsChange}
            onChildClick={this.childClick}
            center={this.state.center}
            distanceToMouse={this.distanceToMouse}
          >
            {this.state.posts.length ? this.state.posts.map(this.allMarkers) : null}
          </GoogleMapReact>

Where,

For Custom marker design, You can edit the following part of code ofmarker.js

<div className="isoMarkerInfoWindow">
  <div className="">
    <div>
      <i className={`${markerIcon}`}></i>
    </div>
  </div>
  <div>
    {props.infoWindow !== null ? openInfoWindow() : null}
  </div>
</div>

For Custom Infowindow Design you can edit the following code portion of marker.js.

  const openInfoWindow = () => {
    const { infoWindow, item } = props;
    if (item.ID !== infoWindow.ID)
      return;
    return (
        <div className="isoInfoWindow">
          <div className="isoInfoWindowImage">
            <img alt="#" src={infoWindow.img}/>
          </div>
          <div className="isoInfoWindowDetails">
            <h3 className="isoHeading">{infoWindow.title}</h3>
            <p className="isoLocation">{infoWindow.location}</p>
          </div>
          <button className="windowCloseBtn" onClick={()=> props.closeInfoWindow()}>
            <i className="ion-android-close"></i>
          </button>
        </div>
      )
  };

You can insert post data in the file name config.js

An array of posts will have to be provided. A single Post will have the following keys.