The following section will walk you through the basics of how to use the Wayfinder Map API. Allowing you to get your Wayfinder integration up and running in no time. However, if you want to dig deeper you can read the publised API Reference.

Hello World

<html>
    <head>
				<title>Simple Map</title>
		    <meta name="viewport" content="initial-scale=1.0">
		    <meta charset="utf-8">
				<style>
	        html, body { margin: 0; padding: 0; height: 100%}
	        .dummy-header {
	            top: 0;
	            left: 0;
	            width: 100%;
	            height: 150px;
	            background-color: pink;
	            z-index: 1;
	            text-align: center;
	            line-height: 150px;
	            color: white;
	            font-size: 2em;
	        }
	        .dummy-footer {
	            position: relative;
	            background-color: gray;
	            height: 50vh;
	            width: 100%;
	            text-align: center;
	            line-height: 50vh;
	            color: white;
	            font-size: 2em;
	        }
	        #map {
	            z-index: 0;
	            height: calc(100vh - 150px);
	            width: 100%;
	        }
					#wayfinder-map {
						height: 100%;
					}
	    </style>
    </head>

<body>

    <div id="wayfinder-map"></div>

</body>
<script src="<https://cdn.wayfinder.acquiredigital.com/live/js-api/wf.js>"></script>
<script type="text/javascript">
    ACQ.init(document.getElementById("wayfinder-map"), {
        apiKey: "XXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    })
</script>
</html>

In this example you can see that we have done a few things:

  1. Created a div element named "wayfinder-map" which will hold the Wayfinder map.
  2. Imported the Wayfinder JS API using the script tag
  3. Called the function ACQ.init() with some passed parameters which will load the required Wayfinder files.

Load the Wayfinder JS API

To load the Maps JavaScript API, use a <script**>** tag like the one in the following example:

<script src="<https://cdn.wayfinder.acquiredigital.com/live/js-api/wf.js>"></script>

The URL contained in the script tag is the location of a JavaScript file that loads all of the symbols and definitions you need for using the Wayfinder Web JavaScript API. This script tag is required.

DOM Element

<div id="wayfinder-map"></div>

For the map to display on a web page, we must reserve a spot for it. Commonly, we do this by creating a named div element and obtaining a reference to this element in the browser's document object model (DOM).

Options

There is one required option for every Wayfinder initialisation: **apiKey** and **controls**.

API Key