Home Original page

Added heatmap functionality by ZAKdev · Pull Request #441 · google-map-react/google-map-react

Hi, I have added heatmap functionality which is from default google map api.

How it works
Just need to pass prop of heatmap with GoogleMapReact component and all heatmap options are available like radius, opacity and gradient.

<GoogleMapComp
  lat={this.props.lat}
  lng={this.props.lng}
  zoom={this.props.zoom}
  products={this.props.products}
  heatmap={{
    positions: [{
        lat: 24.075,
        lng: 54.947,
      },
      {
        lat: 24.075,
        lng: 54.940,
      },
      {
        lat: 24.075,
        lng: 54.943,
      },
      {
        lat: 24.075,
        lng: 54.933,
      },
      {
        lat: 24.075,
        lng: 54.923,
      }],
      options: {
        radius: 20,
        opacity: 0.7,
        gradient: [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
      }
    }
  }
</GoogleMapComp>