Info Window

See how to display content in an overlay that looks like a popup window and how to configure and style it using Templating and CSS.

Create an Info Window
Build a TemplateRenderer
Open an Info Window
Close an InfoWindow

An Info Window displays properties of a store in a bubble above the map, at the store latlng position and usually opened upon map events, such as user clicks. The Woosmap JS Store Locator API offers you two ways to build an Info Window:

woosmap.LocatorWindow implements a google.maps.InfoWindow and is mainly designed to display store attributes with default Google Info Window behaviour and automatic positioning for better readability.
woosmap.ui.InfoBox implements a customized Info Window from the former Google Maps V3 utility Libary. This InfoBox behaves like a google.maps.InfoWindow, but it supports several additional properties for advanced styling. You can put any content in it - not only stores attributes. It can also be used as a map label.

If you create a new woosmap.LocatorWindow specifying any infoBoxOptions it will implement a woosmap.ui.InfoBox.

Here is a sample demonstrating the use of a standard woosmap.LocatorWindow with template rendering.

Create an Info Window

To add an Info Window, you’ll need to create a new instance of woosmap.LocatorWindow and passing it a woosmap.TemplateRenderer object to specify the HTML structure in which the store attributes will be rendered.

        const templateInfoWindow =
        "<div class='store-title'>{{name}}</div>" +
        "<div class='store-address'>{{address.lines}}</div>" +
        "<div class='store-contact'><a href='tel:{{contact.phone}}'>{{contact.phone}}</a></div>";
const renderer = new woosmap.TemplateRenderer(templateInfoWindow);
const infoWindow = new woosmap.LocatorWindow(map, renderer);

You don’t need to create multiple instances of LocatorWindow for different store markers.

Build a TemplateRenderer

The Woosmap JS Store Locator API embeds a simple logic-less template system like Mustache. The woosmap.TemplateRenderer that you put as parameter to the woosmap.LocatorWindow will receive a store properties object. Therefore, the tags specified in the template should correspond to the properties object of Store Data Structure.

Simple Template

Here’s a simple example.

        const templateInfoWindow =
        "<div class='store-title'>{{name}}</div>" +
        "<div class='store-address'>{{address.lines}}</div>" +
        "<div class='store-contact'><a href='tel:{{contact.phone}}'>{{contact.phone}}</a></div>";

Assume that the selected store have this following properties.

        {
  "store_id": "123456",
  "name": "SuperMarket Edinburgh",
  "address": {
    "lines": ["20 Castle Terrace"]
  },
  "contact": {
    "phone": "+441313375757"
  }
}

The rendered template will look like.

        <div class='store-title'>SuperMarket Edinburgh</div>
<div class='store-address'>20 Castle Terrace</div>
<div class='store-contact'><a href='tel:+441313375757'>+441313375757</a></div>

Register Lambda Function

As the template system is logic-less it could be hard to display advanced behaviour. To enable a finer-grained processing of your stores attributes you can add to your template some custom tags/functions using the woosmap.TemplateRenderer.registerLambda method. You will have access to the selected store properties inside the lambda function using infoWindow.get("selectedStore").

Here is a sample to put an opening label when the store is opened.

        function getOpeningLabel() {
  let openLabel = "Close";
  const store = infoWindow.get("selectedStore").properties;
  if (store.open && store.open.open_now) {
    openLabel = store.open.current_slice["all-day"]
      ? "24/24"
      : store.open.current_slice.start + "–" + store.open.current_slice.end;
    openLabel =
      store.open && store.open.open_now ? "Open now: " + openLabel : "";
  }
  return openLabel;
}

const templateInfoWindow =
        "<div class='store-title'>{{name}}</div>" +
        "<div>{{#opening_label}}{{/opening_label}}</div>";

const renderer = new woosmap.TemplateRenderer(templateInfoWindow);
renderer.registerLambda('opening_label', getOpeningLabel);

Open an Info Window

The woosmap.TiledView handles the click event on all store markers and save the store clicked into a property called selectedStore. As the woosmap.LocatorWindow and the woosmap.TiledView both extend the MVCObject this property is bindable. Therefore, to automatically open the Info Window when a user select a store on the Map, bind the selectedStore property to the LocatorWindow.

        mapView.bindTo("selectedStore", infoWindow);

The following example displays coffee shops at the center of London. When the user clicks the marker, an info window opens.

        let map, mapView, infoWindow;
const templateInfoWindow =
        "<div class='store-title'>{{name}}</div>" +
        "<div class='store-address'>{{address.lines}}</div>" +
        "{{#contact.phone}}<div class='store-contact'><a href='tel:{{contact.phone}}'>{{contact.phone}}</a></div>{{/contact.phone}}";

function initMap() {
  const loader = new window.woosmap.MapsLoader(googleLoadOptions);
  loader.load(function () {
    map = new window.google.maps.Map(
      document.getElementById("map"),
      googleMapsOptions
    );
    mapView = new window.woosmap.TiledView(map, woosmapOptions);
    const renderer = new woosmap.TemplateRenderer(templateInfoWindow);
    const infoWindow = new woosmap.LocatorWindow(map, renderer);
    mapView.bindTo("selectedStore", infoWindow);
  });
}

You can also decide to open the infoWindow on a given store using openOn() method.

        const dataSource = new woosmap.DataSource();
dataSource.getStoreById("2329", (store) => {
  infoWindow.openOn(store);
});

Close an InfoWindow

Once opened, an InfoWindow can be closed either when the user clicks the close button at top right or by explicitly calling the close() method. For example, you can close the InfoWindow when the user clicks outside it on the map.

        map.addListener('click', (e) => {
  infoWindow.close();
})

Was this article helpful?

Have more questions? Submit a request