Add Heatmap Example

src/Home.js

@@ -61,6 +61,9 @@ const Home = () => (
       <ListItem>
         <StyledLink to={`${defaultPath}autocomplete`}>Autocomplete</StyledLink>
       </ListItem>
+      <ListItem>
+        <StyledLink to={`${defaultPath}heatmap`}>Heatmap</StyledLink>
+      </ListItem>
     </List>
   </Wrapper>
 );

src/examples/Heatmap.js

@@ -0,0 +1,55 @@
+import React, { Component, Fragment } from 'react';
+import isEmpty from 'lodash.isempty';
+
+// examples:
+import GoogleMap from '../components/GoogleMap';
+
+// consts
+import LOS_ANGELES_CENTER from '../const/la_center';
+
+class Heatmap extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      places: [],
+    };
+  }
+
+  componentDidMount() {
+    fetch('places.json')
+      .then(response => response.json())
+      .then(data => this.setState({ places: data.results }));
+  }
+
+  render() {
+    const { places } = this.state;
+    const data = places.map(place => ({
+      lat: place.geometry.location.lat,
+      lng: place.geometry.location.lng,
+      weight: Math.floor(Math.random() * Math.floor(5)),
+    }));
+    const heatmapData = {
+      positions: data,
+      options: {
+        radius: 20,
+        opacity: 1,
+      },
+    };
+
+    return (
+      <Fragment>
+        {!isEmpty(places) && (
+          <GoogleMap
+            defaultZoom={10}
+            defaultCenter={LOS_ANGELES_CENTER}
+            heatmapLibrary
+            heatmap={heatmapData}
+          />
+        )}
+      </Fragment>
+    );
+  }
+}
+
+export default Heatmap;

src/index.js

@@ -7,6 +7,7 @@ import Home from './Home';
 import Main from './examples/Main';
 import SearchBox from './examples/Searchbox';
 import Autocomplete from './examples/Autocomplete';
+import Heatmap from './examples/Heatmap';
 
 // styles
 import './index.css';
@@ -28,6 +29,7 @@ ReactDOM.render(
         <Route path={`${defaultPath}default`} component={Main} />
         <Route path={`${defaultPath}searchbox`} component={SearchBox} />
         <Route path={`${defaultPath}autocomplete`} component={Autocomplete} />
+        <Route path={`${defaultPath}heatmap`} component={Heatmap} />
         <Redirect exact from="*" to={defaultPath} />
       </Switch>
     </App>