Mount the UPCS Map With UPCS.mount

Once your server has created a session, you display the map by loading the UPCS embed script and calling UPCS.mount.

Load the script

<script src="https://api.upcs.io/api/embed/upcs-embed.js"></script>

Call UPCS.mount

const map = UPCS.mount('#upcs-map', {
  sessionToken: 'TOKEN_FROM_YOUR_SERVER',
  height: '500px',
  zoom: 12,
  style: 'streets',
  onReady: function () {},
  onSelect: function (result) {},
  onError: function (error) {}
});

The first argument is a selector for the element that will hold the map.

Options

Option	Purpose
sessionToken	The token from your server. Required.
height	Height of the map, for example 500px.
center	Where the map first points, as { lat, lng }.
zoom	Starting zoom level.
style	streets (default), satellite, traffic or biking.
onSelect	Called when a location is selected.
onError	Called when something fails.
onReady	Called when the map is ready.

The grid appears from zoom 18, so users zoom in that far to choose an exact cell.

The return value

UPCS.mount returns an object with:

• iframe: the iframe element that holds the map.
• destroy(): removes the map when you no longer need it.

map.destroy();

Call destroy() before mounting again in a single-page app, for instance when a user leaves the checkout step.

Next

• Read the click response for the onSelect payload.
• If onError fires with an expired session, see session expiry.

Layout tips

Give the container a defined width, and set height through the option rather than CSS alone. On narrow screens, keep the map at a moderate height so people can scroll past it. Test the keyboard and touch behaviour on the devices your customers actually use.