Skip to content

When running my React application, I encountered the following error message. TypeError: window[_0x1eca09(...)][_0x1eca09(...)] is not a function #3

@DPK-Dev

Description

@DPK-Dev

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;
`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions