Using react-leaflet-google-layer in react application we have some error how to solve ?? #45
Description
Cannot read properties of null (reading '_controlCorners')
TypeError: Cannot read properties of null (reading '_controlCorners')
at NewClass._setupAttribution (http://localhost:3000/static/js/bundle.js:165727:17)
at NewClass.fire (http://localhost:3000/static/js/bundle.js:168931:16)
at http://localhost:3000/static/js/bundle.js:165715:16
react 18.2.0
react-leaflet 4.2.1
react-leaflet-google-layer": "^2.2.0",
react code :
import { useState } from "react";
import {
LayersControl,
MapContainer,
Marker,
Polyline,
useMap,
} from "react-leaflet";
import "./leaflet.css";
import "leaflet/dist/leaflet.css";
import LeafLetIcon from "./Constants";
import ReactLeafletGoogleLayer from "react-leaflet-google-layer";
export const LeafLet = ({ pathData }) => {
const firstPosition = pathData?.[0];
const lastPosition = pathData?.slice(-1)[0];
const middlePosition = pathData?.[(pathData?.length / 2) | 0];
const tripdata = pathData?.map((o) => Object.keys(o).map((k) => o[k]));
const polylinedata = tripdata?.map((point) => point.slice(0, 2));
const ResizeMap = () => {
const map = useMap();
map._onResize();
return null;
};
const polylineColor = {
color: "rgb(26 131 175 / 80%)",
fillOpacity: 0.01,
weight: 4,
};
return (
<>
<MapContainer
center={{
lat: middlePosition?.latitude,
lng: middlePosition?.longitude,
}}
zoom={10}
zoomControl={false}
scrollWheelZoom={false}
>
<ReactLeafletGoogleLayer
apiKey={process.env.REACT_APP_APIKEY}
type={"roadmap"}
/>
<Marker
position={{
lat: firstPosition?.latitude,
lng: firstPosition?.longitude,
}}
icon={LeafLetIcon}
></Marker>
<Polyline pathOptions={polylineColor} positions={polylinedata} />
<Marker
position={{
lat: lastPosition?.latitude,
lng: lastPosition?.longitude,
}}
icon={LeafLetIcon}
></Marker>
</MapContainer>
</>
);
};