Map

Hooray Dynamic Map Framework

A CDN to deploy a dynamic area map for Hooray Agency’s advanced SEO hospitality clients.

Context

Branded & dynamic area amenity maps are often difficult to create and manage at scale. As a site’s (or sites’) content base grow & change, so should (ideally) the information displayed in the area map. This is a challenge for many SEOs & Devs, as the map is often hard-coded for each property (either in the server or the client).

To address this, we’ve built a CDN that delivers a dynamic area map based on a centralized store of area amenities. The map is added to a website via a single script tag. This script tag queries the central repository, deploying the map to each page that includes the script tag, and has an element with the id of hooray-map (which is where the map is appended to)`.

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

Features

Centralized Client Information
Pre-Mapped Dynamic Map Framework
Conditional Generation for Each Map Marker

Benefits

Easier/faster initial deployment via a global script tag.
External control of both the input markers and the generative framework.

Implementation

Talk to Jake Labate at Hooray to confirm the hotel brand’s data is assembled property and in the repository.
Add the following script tag to the head of the website (globally). Ensure the type is set to module.

<!-- Hooray Map Framework -->
<script type="module" src="https://map.hooray-seo.com/script.js?domain="></script>

Add your unique domain code as the domain URL param value the end of the script src to query the correct map data.
Publish the site. Wait / refresh pages as needed. WordPress can take up to an hour to propagate header.php files.

Notes

The map is appended an element with the selector of #hooray-map, so a div with that id must be added on the page where the map is desired.
The maps framework (JS) can be found here.
See a demo of the map here.

Styling

CSS is applied though the /styles.css file.
All relevant HTML id and class attribute values start with hooray-map to differentiate between any other CSS classes on the page.

Markers

Cards

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

To Do

We are building a UI to manage brand data to allow direct brand data creation, editing and to deploy the data used in the map directly from this custom UI.
We are implementing a page-specific server cache to reduce the number of requests, and to speed up the delivery of the map.

Credit (or blame)

Framework & delivery method by Jake Labate, Head of SEO at Hooray Agency.

Map