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.
<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:
div
element named "wayfinder-map" which will hold the Wayfinder map.ACQ.init()
with some passed parameters which will load the required Wayfinder files.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.
<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).
There is one required option for every Wayfinder initialisation: **apiKey
** and **controls**
.