Cordova¶

InfoWindow¶

Info Windows provide a user-friendly method for displaying information related to a marker, essentially explaining the purpose of that marker. When users encounter a marker, their natural instinct is to click on it to discover more details, and presenting an info window is the ideal approach to fulfill this expectation.

React JS Component Live Demo : CodeSandbox

Adding a InfoWindow¶

this.infowindowObject = this.mapplsClassObject.InfoWindow(
    {
        map: this.mapObject, //mapObject to plot infowindow
        position: 
        {
            "lat":  "28.552097968260668" ,
            "lng":  "77.2701604561851"
        },
        content:  "MMI Infowindow", // Content of infowindow
        //Opotional Parameters
        class:  info_class , //class
        offset: [0,10], //Offset
        maxWidth:  300, //Max Width of popup
        closeButton:  true  //Close button on infoWindow
    }
)

Removing a InfoWindow¶

mapplsClassObject.removeLayer({
    map: mapObject,
    layer: infowindowObject,
  });

React JS Implementation :¶

import { mappls } from "mappls-web-maps";
import { useEffect, useRef, useState } from "react";

const mapplsClassObject = new mappls();

const InfoWindowComponent = ({ map }) => {
  const infowindowRef = useRef(null);

  useEffect(() => {
    if (infowindowRef.current) {
      mapplsClassObject.removeLayer({ map: map, layer: infowindowRef.current });
    }
    infowindowRef.current = mapplsClassObject.InfoWindow({
      map: map,
      content:
        '<div><div style="background-color:#191919;color:#fff;padding:5px;margin-top:2%;">MapmyIndia Head Office</div><p> Open 9AM & Closes 6:30PM Mon to Fri</p><p>Sat & Sun: Off</p></div>',
      position: {
        lat: 28.529467,
        lng: 77.22315,
      },
      offset: [0, 10], //Offset
      maxWidth: 300, //Max Width of popup
      closeButton: true, //Close button on infoWindow
    });
  });
};

const App = () => {
  const map = useRef(null);
  const [isMapLoaded, setIsMapLoaded] = useState(false);

  useEffect(() => {
    mapplsClassObject.initialize("<Authorization Token>", { map: true }, () => {
      if (map.current) {
        map.current.remove();
      }
      map.current = mapplsClassObject.Map({
        id: "map",
        properties: {
          center: [28.529467, 77.22315],
          zoom: 15,
        },
      });
      map.current.on("load", () => {
        setIsMapLoaded(true);
      });
    });
  }, []);

  return (
    <div
      id="map"
      style={{ width: "100%", height: "99vh", display: "inline-block" }}
    >
      {isMapLoaded && <InfoWindowComponent map={map.current} />}
    </div>
  );
};
export default App;

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!