Skip to content

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

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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions