Live routes with Google Maps API

(Article updated 9th February, 2018)

My latest project is a WordPress plugin, Maps for BuddyBeacon, which pulls location (beacon) data in from a route tracking app (ViewRanger), and displays this on a Google Map.

I was inspired to create this as a challenge after being involved in finding a solution to display the live route for Simon Clark who ran around the coast of Britain raising funds for charity. For that I used Social Hiking to embed a map in the charity website, and was so impressed I wanted to create a more simplified version for WordPress sites. Social Hiking have just announced that they will be closing at the end of May this year, unfortunately – they were a great resource that allowed hikers, cyclists, and walkers to share their adventures, and Phil Sorrel (the brains behind it) inspired me in terms of what a developer can create to help a community.

I recently put part of the code on CodePen to replicate pulling live location data and displaying the route, and it quickly became my most viewed pen. So, I thought I would briefly go through some of the challenges, and solutions in creating this.

The goal: Gather all information from the user needed to generate a map with a route, and display it on the front-end of a WordPress site via a shortcode.

The challenges

• Create multiple settings pages in the WordPress dashboard to gather data such as API keys, map and beacon display preferences, and also to show an editable table of all existing maps. Data needed to be validated and sanitized, and on the page to add map functionality there needed to be default options in place.
• Allow the user to set a start date and an end date, or set the end date to current to show live routes.
• When displaying the map with the shortcode, include an option to show an information box with the map title, date range, and total distance covered (calculated in either miles or km, as the total distance between each beacon submitted).
• Allow multiple maps to display on any page.

Some of the solutions

• The table functionality in the ‘manage maps’ option page was created by extending the WP_List_Table class.
• The datepicker had to include the ability to choose the specific time as well, as the user may have more than one route on one day, so I used Bootstrap’s Datetimepicker.
• Adding multiple maps to one page involved a significant re-write as I’d built the plugin based on just one map per page. It involved creating a dynamic wp_localize_script variable for each unique shortcode ID, passing that to Javascript, looping through each shortcode ID to see if it matched the dynamic ID added to the ‘map-canvas’ class in HTML, and then running the code with the variables specific to each map.
• Another issue was discovered on testing the plugin – the map sometimes showed and sometimes didn’t on live sites. This was due to how the scripts were being loaded. The custom JS script to load the map, beacons and route was a dependency on the Google API script which was called afterwards, yet the script loading order wasn’t always correct (or rather, the custom JS script wouldn’t be completely loaded before the Google API script started). This was largely resolved with setting the dependency as above, yet the maps would not load in Internet Explorer or Microsoft Edge. My workaround was to use Javascript’s setTimeout() function and detect if the map function (initMap) had been called after 3 seconds had passed. If not, the function was called again:

  setTimeout(function() {
  
  		if (initMap.called) {
  		    return;
  		 }
  		else {
  			initMap();
  }, 3000);
  
  window.initMap = function() {
  		initMap.called = true;
          //Rest of code

The Maps for BuddyBeacon plugin is available on the WordPress repository, and you can also find the source code on GitHub.

Future additions, time permitting:

• Integrating Twitter and other social media platforms so that individual beacons can hold links to social media posts and images.
• Creating the ability to manually delete (or add) beacons. Update (9th February 2018): The ability to delete beacons has been added.
• Provide the option to display the map output as a Gutenberg block as an alternative to using a shortcode.

I would love to collaborate with any other developers who would be interested in contributing to and growing this plugin.