go to developers doc

Init the Map

Instantiate the Map Object and the Map Tiled View to display your stores
  1. Create the Map Container
  2. Render the Map

This tutorial is outdated and will be taken down shortly. To integrate Woosmap Map with React, please use the Woosmap Map JS library. You can refer to this code sample for guidance: React Map Basic.

Create the Map Container

You need to create a map container element where the map and stores view can be displayed. You’ll also need to specify this container when instantiating a new Map object. All React components can be passed a ref using the ref prop, in which case React will automatically assign the underlying DOM node, to mapContainerRef.current.

Set the mapContainerRef like below specifies that map should be drawn to the HTML page in a new <div> element.

Map.js

JavaScript
        import {useRef} from "react";

const Map = () => {
  const mapContainerRef = useRef();
  useEffect(() => {
    // you can acces the Map Container DOM element using 
    // mapContainerRef.current
  }, [])
  return (
          <div>
            <div className='mapContainer' ref={mapContainerRef}/>
          </div>
  );
}

The map container needs to have non-zero width and height to render properly. To display the Map in fullscreen, add the following code to the Map.css file:

Map.css

CSS
        .mapContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Render the Map

You can now render the Map in your App. The Woosmap JS Loader add to the global window variable an object called window.WoosmapLoader. This object has a load method which takes as parameters your public key, the desired Woosmap Store Locator JS API version and a callback that will be executed when the API is fully loaded. You can also decide to embed or not jQuery inside the Woosmap Store Locator JS API (if you don’t specify "loadJQuery": false, jQuery will be accessible through window.woosmap.$)

We put before all namespaces that come from external JS File the window object to make explicit that we’re using a global variable not depending on the component.

Map.js

JavaScript
        const initMap = () => {
  let woosmapLoadOptions = {
    "version": "1.4",
    "publicKey": "woos-48c80350-88aa-333e-835a-07f4b658a9a4",
    "loadJQuery": false
  };
  woosmapLoadOptions.callback = () => {
    const loader = new window.woosmap.MapsLoader({"key": "Google Maps API KEY Here"});
    loader.load(() => {
      const map = new window.google.maps.Map(mapContainerRef.current, {
        "center": {"lat": 51.53, "lng": -0.185},
        "zoom": 10
      });
      const mapView = new window.woosmap.TiledView(map, conf.markersOptions);
    });
  };
  window.WoosmapLoader.load(conf.woosmapLoadOptions);
}

As in the above example, create an instance of window.woosmap.MapsLoader and execute the loader.load() method to finally create a Google Map and a TiledView.

A TiledView takes two arguments :

In the command line, run the command npm start. This starts a local server and opens a new page in your browser that contains the new Map with your stores.