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.

              key: API_KEY,
            {this.state.posts.length ? : null}


Parameter Type Keys/Parameters Description
center Object. lat and lng Center of the Map
defaultZoom Integer Default zoom level
onChildClick Function key, childProps Marker click callback functionbootstrapURLKeys
bootstrapURLKeys Object API_KEY Google Map API Key
onBoundsChange Function key, childProps Callback function for changing map bound

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

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

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 (
        <div className="isoInfoWindow">
          <div className="isoInfoWindowImage">
            <img alt="#" src={infoWindow.img}/>
          <div className="isoInfoWindowDetails">
            <h3 className="isoHeading">{infoWindow.title}</h3>
            <p className="isoLocation">{infoWindow.location}</p>
          <button className="windowCloseBtn" onClick={()=> props.closeInfoWindow()}>
            <i className="ion-android-close"></i>

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.

Keys Type Parameters Description
ID Integer
title String Title Shown on Info Window
location String Location shown on Info Window
img String Image Url
lat Integer Latitude
lng Integer Longitude
marker Object borderStyle,borderColor,fontFamily,iconClass Styling on each marker

results matching ""

    No results matching ""