fullstackreact/google-maps-react

Cannot read property 'hasOwnProperty' of undefined when clicking Marker

Dnguye92 opened this issue · 1 comments

I've been having a lot of trouble using this package w/ Typescript + Next.js. Please ignore the any types but with this current setup, the map gets wiped when I click on a Marker, resulting in this console error Cannot read property 'hasOwnProperty' of undefined when clicking Marker.

import React, { useEffect, useState } from "react";
import { Map, Marker, InfoWindow, GoogleApiWrapper } from "google-maps-react";
import classNames from "classnames/bind";

import { LocationProps } from "../../interfaces/location-inteface";

export interface Props {
    google?: any;
    locations?: Array<LocationProps>;
    map?: google.maps.Map | google.maps.StreetViewPanorama
}

export type LatLngLiteral = {
    lat: number,
    lng: number
};

const InStoreContainer: React.FC<Props> = (props: Props) => {
    const { google, locations } = props;
    const [map, setMap] = useState({});
    const [activeInfoWindow, setActiveInfoWindow] = useState(false);
    const [activeMarker, setActiveMarker] = useState({});
    const [mapPosition, setMapPosition] = useState({
        lat: null,
        lng: null
    });

    const getCurrentPosition = () => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (pos: Position) => {
                    setMapPosition({
                        lat: pos.coords.latitude,
                        lng: pos.coords.longitude,
                    });
                },
                (error: PositionError) => alert(error),
                { enableHighAccuracy: true, timeout: 10000, maximumAge: 300000 }
            );
        }
    };

    const onMapClicked = () => {
        if (activeInfoWindow) {
            setActiveMarker(null);
            setActiveInfoWindow(false);
        }
    };

    const onMarkerClick = (marker) => {
        console.log(marker);
        setActiveMarker(marker);
        setActiveInfoWindow(true);
    };

    const onOffInfoWindowClose = () => {
        setActiveMarker(null);
        setActiveInfoWindow(false);
    };

    useEffect(() => {
        getCurrentPosition();
    }, []);
    
    return (
        <Map
            google={google}
            center={mapPosition}
            initialCenter={mapPosition}
            zoom={8}
            onReady={(mapProps, map) => {
                setMap({map})
            }}
            onClick={onMapClicked}
        >
            {locations.map((location: any) =>
                <Marker
                    key={location.id}
                    position={{
                        lat: location.attributes.latitude,
                        lng: location.attributes.longitude
                    }}
                    onClick={onMarkerClick}
                    title={location.attributes.shop_name}
                />
            )}
            {map && activeMarker && (
                <InfoWindow
                    map={map as google.maps.Map}
                    marker={activeMarker}
                    google={google}
                    visible={activeInfoWindow}
                    onOpen={onOffInfoWindowClose}
                >
                    <div><h1>Some content</h1></div>
                </InfoWindow>
            )}
        </Map>
    );
};

const InStoreMap = GoogleApiWrapper({
    apiKey: "API_KEY",
    version: "3",
})(InStoreContainer);

export default InStoreMap;

The map and marker renders fine but I suspect this has something to do with InfoWindow
ezgif com-gif-maker

Typescript v4.0.2
google-maps-react v2.0.6

@Dnguye92 ,
Is this issue fixed?