Google-maps-react: HeatMaps broken because of API change.

[RustyRaptor]

You can no longer call the google.maps.visulizations library as it is now served seperately from my understanding.
https://developers.google.com/maps/documentation/javascript/visualization

TypeError: google.maps.visualization is undefined[Learn More] bundle.js line 403 > eval:181:9
renderHeatMap
HeatMap.js:186
componentDidMount
HeatMap.js:133

Here is my code.

import {Map, Polygon, HeatMap, GoogleApiWrapper} from 'google-maps-react';
import React from 'react'


export class MapContainer extends React.Component {
    render() {
        const triangleCoords = [
            {lat: 25.774, lng: -80.190},
            {lat: 18.466, lng: -66.118},
            {lat: 32.321, lng: -64.757},
            {lat: 25.774, lng: -80.190}
          ];
          const 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)'
          ];

          const positions = [
            { lat: 25.782551, lng: -80.445368 },
            { lat: 25.782745, lng: -80.444586 },
            { lat: 25.782842, lng: -80.443688 },
            { lat: 25.782919, lng: -80.442815 },
            { lat: 25.782992, lng: -80.442112 },
            { lat: 25.7831, lng: -80.441461 },
            { lat: 25.783206, lng: -80.440829 },
            { lat: 25.783273, lng: -80.440324 },
            { lat: 25.783316, lng: -80.440023 },
            { lat: 25.783357, lng: -80.439794 },
            { lat: 25.783371, lng: -80.439687 },
            { lat: 25.783368, lng: -80.439666 },
            { lat: 25.783383, lng: -80.439594 },
            { lat: 25.783508, lng: -80.439525 },
            { lat: 25.783842, lng: -80.439591 },
            { lat: 25.784147, lng: -80.439668 }
        ];
        return (
            <div>
            <Map
                style={{height: '100%', width: '100%', position: 'relative'}}
                className='map'
                google={this.props.google}
                zoom={5}
                onClick={this.onMapClicked}
                initialCenter={{
                    lat: 25.761681,
                    lng: -80.191788
                }}
            >

                <Polygon
                    paths={triangleCoords}
                    strokeColor="#0000FF"
                    strokeOpacity={0.8}
                    strokeWeight={2}
                    fillColor="#0000FF"
                    fillOpacity={0.35}

                />
                <HeatMap
                    gradient={gradient}
                    opacity={1}
                    positions={positions}
                    radius={1000}
                />
                </Map>

            </div>
        )
    }
}


export default GoogleApiWrapper({
  apiKey: ("<redacted>")
})(MapContainer)

I am using the latest release on NPM.

[simondarke]

This is a fairly old issue but so you've probably figured it out but you need to add
libraries: ['visualization'] to the GoogleApiWrapper call.

Full example:
export default GoogleApiWrapper({ apiKey: ('<redacted>'), libraries: ['visualization'] })(MapContainer)