Heatmap Data "Uncaught (in promise) TypeError: b.lat is not a function"

[YuK1Game]

Google Map Wrappers.

import React from 'react';
import { GoogleMap as GoogleMapComponent, withGoogleMap, withScriptjs } from 'react-google-maps';

const GoogleMap = withScriptjs(withGoogleMap(props => {
    return <GoogleMapComponent {...props} ref={props.onMapMounted}>{props.children}</GoogleMapComponent>
}));

export default GoogleMap;

Component.

import React from 'react';
import GoogleMap from './GoogleMap';
import HeatmapLayer from 'react-google-maps/lib/components/visualization/HeatmapLayer';
import PropTypes from 'prop-types';

class Heatmap extends React.Component
{
    constructor(props) {
        super(props);
    }

    render() {

        const styles = {
        };

        return (
            <div style={ styles.root }>
                <GoogleMap
                    googleMapURL={ `${this.props.uri}?key=${this.props.key}&libraries=visualization` }
                    loadingElement={ <div style={{ height: this.props.height }} />}
				    containerElement={ <div style={{ height: this.props.height }} />}
                    mapElement={ <div style={{ height: this.props.height }} /> }
                    defaultZoom={ this.props.zoom }
                    defaultCenter={{
                        lat: this.props.lat,
                        lng: this.props.lng
                    }}
                    >
                    <HeatmapLayer
                        data={ this.props.points }
                        options={{
                            radius: 20,
                        }}
                        />
                </GoogleMap>
            </div>
        )
    }
}

Heatmap.defaultProps = {
    uri : 'https://maps.googleapis.com/maps/api/js',
    key : 'my api key',
    height : "300px",
    width : "100%",
    zoom : 0,
    lat : 35.658034,
    lng : 139.701636,
    points : [
        {lat: 37.782, lng: -122.447, weight: 0.5},
        {lat: 37.782, lng: -122.443, weight: 2},
        {lat: 37.782, lng: -122.441, weight: 3},
        {lat: 37.782, lng: -122.439, weight: 2},
        {lat: 37.782, lng: -122.435, weight: 0.5},
        {lat: 37.785, lng: -122.447, weight: 3},
        {lat: 37.785, lng: -122.445, weight: 2},
        {lat: 37.785, lng: -122.441, weight: 0.5},
        {lat: 37.785, lng: -122.437, weight: 2},
        {lat: 37.785, lng: -122.435, weight: 3}
    ],
};

Heatmap.propTypes = {
};

export default Heatmap;

Chrome console sad: Uncaught (in promise) TypeError: b.lat is not a function

maby its value invalid

points : [
        {lat: 37.782, lng: -122.447, weight: 0.5},
        {lat: 37.782, lng: -122.443, weight: 2},
        {lat: 37.782, lng: -122.441, weight: 3},
        {lat: 37.782, lng: -122.439, weight: 2},
        {lat: 37.782, lng: -122.435, weight: 0.5},
        {lat: 37.785, lng: -122.447, weight: 3},
        {lat: 37.785, lng: -122.445, weight: 2},
        {lat: 37.785, lng: -122.441, weight: 0.5},
        {lat: 37.785, lng: -122.437, weight: 2},
        {lat: 37.785, lng: -122.435, weight: 3}
    ],

but, if use new google.map.LatLng results error 'google' is undefined.

solved?

[lucas-tulio]

You have to use new google.map.LatLng to create your points. Add the line:

/*global google*/

at the top of your file so you can use google.

[marileen-jansen]

You need to use new window.google.maps.LatLng(_, _) but note the window. (window - dot) otherwise you will get the 'google' is undefined.