HeatmapLayer and withScriptjs are sort-of incompatable

[ZephD]

HeatmapLayer requires a google.maps.LatLng object and cannot accept a LatLngLiteral ({lat:0, lng:0}).

However, google.maps.LatLng is loaded asynchronously with withScriptjs, and therefore is not available when creating the props.

My current workaround is to convert the data upon render if window.google exists.

export MyHeatMapLayer({heatmapData}) => {
  let convertedHeatmapData;
  if (window.google) {
      convertedHeatmapData = heatmapData.map(d => ({
        location: new window.google.maps.LatLng(d.location || d),
        weight: d.weight || 1,
      }));
    }
  return (<HeatmapLayer data={convertedHeatmapData} />);
}

It may be beneficial to do this within HeatmapLayer, allowing us to use LatLngLiterals.
Also, we can do it upon data set, rather than upon render, reducing how often you loop through the data.

[matthill1]

Hey ZephD. I take it then you managed to sucesfully get the react-google-maps to display heatmap data? Would you mind sharing the source code

[ZephD]

@matthill1 : I had to manually tweak the react-google-maps code. See #376.

This, plus the code above to translate the LatLng objects to google's LatLng objects if google exists.

[matthill1]

I managed to get it to display in the following way:

const GoogleMapHeatMaps = withGoogleMap(props => (
  <GoogleMap
    defaultZoom={4}
    defaultCenter={centerLocation}
  >
<HeatmapLayer data = {heatmapdata}/>
 </GoogleMap>
)
and 

export default class Map extends Component {
render() {
return (
      <GoogleMapImageMarkersandHeatMaps
        containerElement={
          <div style={{ height: `100%` }} />
        }
        mapElement={
          <div style={{ height: `100%` }} />
        }
/>
    );
  }
}

where heatmapdata is set within const GoogleMapHeatMaps

[tomchentw]

Please refer to Getting Help section in the README (or #469).