Custom Marker Map w/o Google Maps

While you can do a lot with the Google Maps Styling Wizard, it sometimes not what your client needs. Our client, kremer.agency, had a very specific look pictured to display DOOH metrics that could only be achieved by a custom background image. So we figured

Why not quickly make our own map?

It wouldn’t be that much effort if we could offer a PDF for download on smaller devices to avoid full responsiveness. We agreed on a 960px wide map for tablet and desktop. Anything smaller would get the download link instead.

Learn

Keep reading for an explanation on how to go on about it.

Keep reading

The button will take you to a step by step guide through the process.
Continue

Watch

Take a look at what this is all about and see the feature in action.

Go there

The button will take you to a project were we implemented this feature.
The DOOH Consultancy

Download

Get the files from GitHub immediately and for free.

From GitHub

The button will take you to GitHub were the files you need are available.
GitHub

Custom Post Type Marker

This time we decided against a plugin and implemented the feature via child theme.

The first thing we need is a Custom Post Type for the markers displayed on the map. With this, the editor can adjust data and add metrics easily. Every marker will have title, text, an image and the x/y coordinates where the marker will be positioned in the container.

Customer Journey Marker

The x/y coordinates are custom fields that we will construct with the well known and brilliant

Custom Marker Map Metabox

Marker Display via Shortcode

The next step is displaying the markers wherever we want to with a shortcode.

That shortcode executes  a WP_Query to get us all the published markers from the database. It then loops through them and builds the html we want in the DOM where the shortcode has been placed.

Because we are smart we organize our html to be processed by some popover JavaScript later. We need to get_

  • the_title
  • the_content
  • the_post_thumbnail_url
  • x/y coordinates per post_meta

for  proper popover markers.

Popover via JavaScript

Because our shortcode generated everything we need into img-tags class “marker”, we can now target those for pretty popovers with

WebUI-Popover is a jQuery-plugin. So we should load our JavaScript with jQuery-dependence.

Styling via CSS

Don’t forget to load the WebUI-Popover-CSS. I just threw it into the style.css of my child theme. You could also style the markers according to your taste if you feel like it.

And this is all the magic. You now create an element with a background image and fixed width/height and process the shortcode inside it. WordPress should pull all the markers you have published earlier and display them inside the container according to coordinates.

Share

Related Posts

Time to Update

Maintenance of High Turnover WooCommerce Stores

What to do when plugin updates suddenly cause problems for a high-traffic online store? We were faced with this task when a maintenance interval looked promising at first, but then led to inaccessibility of our client’s high-volume WooCommerce store under load.

GET IN TOUCH

Contact.