Google Maps WordPress Plugin

The project consisted on creating a WordPress plugin that allowed a WordPress site editor (a person) to embed a Google Map with multiple markers, using just a shortcode.

WordPress already has a lot of maps plugins that work with Google Maps, Bing Maps, Here WeGo and even the Open Street Map at the same time. Unfortunately, the available solutions did not meet the client requirements or were just to expensive for a multisite installation that goes over 500 sites.

The main reason to require a custom plugin, was that the client needed to create maps and have them linked to a custom database of employees, so you could show a map in a employee profile to specify where she was stationed.

Initial Requirements

The client didn’t provided a requirement list or use cases document. But this are roughly what she wanted after a couple of meetings:

The Solution

The solution was a Locations plugin with the following components:


Plugin activation and notifications

Upon activation, the plugin asks the site editor to configure the Google Maps API

Settings page

The Settings where you can enter the Google Maps API Key.

It also allows you to enter HTML templates on how to display the marker page and how to display the list of places when using the list places shortcode.

The HTML templates use the tiwg template engine so the site editors could create their templates using fields, loops, conditionals, etc. Right in the settings page.

This is an example of a settings page with all the fields.

Marker creation page

On the plugin you have to create markers (called places per client request) and then add those markers to a map.

This is the marker creation page. There you can specify how the marker is diplayed on the front end and where th marker is placed.

On the marker page you can see that a [ihs-location-place place="8"] code. This is the shortcode that you can use to place this marker in any page or blog post.

Once the marker fields are completed, you can access it on the front-end.

As you can see, the content of the place page or marker page is dictated by what you provided on template field on the settings page.

Map creation page

The map creation page, is very similar to the marker creation page. With two big differences:

Contrary to the markers, a Map Page is not created. So, to display the map, you have to use the shortcode inside a page or post.

And this will be the result.


Aside from acquiring knowledge of the Google Maps API. Some technical and design challenges where faced.