-
Notifications
You must be signed in to change notification settings - Fork 3
When running my React application, I encountered the following error message. TypeError: window[_0x1eca09(...)][_0x1eca09(...)] is not a function #3
Description
When running my React application, I encountered the following error message.
TypeError: window[_0x1eca09(...)][_0x1eca09(...)] is not a function
The error message mentioned above is displayed in the browser console, indicating that there is an issue with accessing a function on an object. This issue only occurs when using the search plugin
The application is built using React.
The issue only occurs when using the search plugin.
`import React, { useEffect, useRef, useState } from "react";
import { mappls, mappls_plugin } from "mappls-web-maps";
const mapplsClassObject = new mappls();
const mapplsPluginObject = new mappls_plugin();
// var callback;
const PlaceSearchPlugin = ({ map }) => {
const placeSearchRef = useRef(null);
useEffect(() => {
const delay = 5000; // Delay in milliseconds (e.g., 5000 for 5 seconds)
const timerId = setTimeout(() => {
if (map && placeSearchRef.current) {
mapplsClassObject.removeLayer({ map, layer: placeSearchRef.current });
}
var optional_config = {
location: [28.61, 77.23],
region: "IND",
height: 300,
};
// Define the callback function before passing it to the search function
const callback = (data) => {
console.log(data); /* get search data in console */
};
placeSearchRef.current = mapplsPluginObject.search(
document.getElementById("auto"),
optional_config,
callback
);
}, delay);
return () => clearTimeout(timerId);
}, [map]);
return null; // Placeholder for a React component
};
const Test = () => {
const [lat, setLat] = useState(null);
const [lng, setLng] = useState(null);
const [error, setError] = useState(null);
const mapRef = useRef(null);
const markerRef = useRef(null);
const [isMapLoaded, setIsMapLoaded] = useState(false);
const auto = {
width: "300px",
position: "absolute",
zIndex: 999,
fontSize: "15px",
padding: "10px",
border: "1px solid #ddd",
outline: "none !important",
};
useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const latC = position.coords.latitude;
const lngC = position.coords.longitude;
setLat(latC);
setLng(lngC);
const loadObject = { map: true };
mapplsClassObject.initialize(
"<token>", // i replaced it
loadObject,
() => {
const mapObject = mapplsClassObject.Map({
id: "map",
properties: {
draggable: true, // toggle draggable map
zoom: 15, //the initial Map `zoom` level.
geolocation: true, // to display the icon for current location
fullscreenControl: true, // It shows the icon of the full screen on the map
rotateControl: true, // enable/disable of the map.
zoomControl: true, // The enabled/disabled Zoom control at a fixed position
clickableIcons: true, //to make the icons clickable
traffic: true,
},
});
const markerObject = mapplsClassObject.Marker({
map: mapObject,
position: {
lat: latC,
lng: lngC,
},
icon: "https://apis.mapmyindia.com/map_v3/1.png",
});
mapObject.on("load", (data) => {
setIsMapLoaded(true);
if (latC !== null && lngC !== null) {
mapObject.setCenter([lngC, latC]);
}
mapObject.addListener("click", function (data) {
console.log(data);
markerObject.setPosition(data.lngLat);
setLat(data.lngLat.lat);
setLng(data.lngLat.lng);
// console.log(mapObject.getCenter().lat);
});
});
mapRef.current = mapObject;
markerRef.current = markerObject;
}
);
},
(err) => {
setError(err.message);
alert("Geolocation error:" + err.message);
}
);
} else {
setError("Geolocation is not supported by this browser.");
alert("Geolocation is not supported by this browser.");
}
return () => {
if (mapRef.current) {
mapRef.current.remove();
}
};
}, []);
return (
<div
id="map"
style={{ width: "100%", height: "99vh", display: "inline-block" }}
>
{isMapLoaded && <PlaceSearchPlugin map={mapRef.current} />}
</div>
{error && <p>Error: {error}</p>}
</div>
</div>
);
};
export default Test;
`