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
Watch
Go there
Download
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.
The x/y coordinates are custom fields that we will construct with the well known and brilliant
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.