Cannot read property 'hasOwnProperty' of undefined when clicking Marker
Dnguye92 opened this issue · 1 comments
Dnguye92 commented
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

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