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,, 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.


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.


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


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.

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 on facebook
Share on twitter
Share on linkedin

Related Posts

WooCommerce SQL

Howto Manipulate WooCommerce Metadata via SQL

With Germanized on board, WooCommerce has several ways to save article numbers. Has the intern spent two days entering the EAN in the wrong field for the 3000 articles in the WooCommerce online shop? Then an SQL superhero has to save the day who can copy content from one field to another in no time.

eCommerce Sales

5 eCommerce Lockdown Tips

eCommerce is booming because since Corona everyone understands the importance of online stores and digitization. We have been supporting online stores since the beginning of the millennium, when you still had to program them yourself, and we would like to tell you here how your eCommerce tools can make good sales and keep you afloat in a crisis.