Events Manager locations map with directions

Events Manager is my events and bookings plugin of choice for WordPress, because it is very flexible, easy to integrate into a theme, and has hooks galore for customising to suit almost any requirement. Its location map doesn’t offer a way to provide directions, however. So, here’s how to replace the Events Manager locations map with WP Flexible Map and get a directions link on location pages.

Thanks to the wonder of custom placeholders, Events Manager makes it easy to add any custom elements you want into its events and locations. The standard locations map is added by using a placeholder, #_LOCATIONMAP. Replacing it just requires a new location placeholder that calls WP Flexible Map instead. I’ve chosen to call it ‘#_LOCATIONMAPWITHDIR’, and I add it into the Single Location Page template like this:

<p>
  <strong>Address</strong><br/>
  #_LOCATIONADDRESS<br/>
  #_LOCATIONTOWN #_LOCATIONSTATE #_LOCATIONPOSTCODE<br/>
  #_LOCATIONCOUNTRY
</p>

<div class="event-location-map">#_LOCATIONMAPWITHDIR</div>

#_LOCATIONNOTES

<h3>Upcoming Events</h3>
<p>#_LOCATIONNEXTEVENTS</p>

Some CSS is needed, so that the map has a size on the page.

div.event-location-map {
    margin:0 0 15px 0;
}

div.event-location-map .flxmap-container {
    width:475px;
    height:350px;
}

Here’s the code that handles that placeholder. NB: both Events Manager and WP Flexible Map need to be installed and activated!

[Edit: updated 2015-08-26, also available as a plugin in a gist]

add_filter('em_location_output_placeholder', 'flxmap_events_manager_location', 10, 3);

/**
* add Events Manager location placeholder for map directions
* @param string $result
* @param EM_Location $location
* @param string $placeholder
* @return string
*/
function flxmap_events_manager_location($result, $location, $placeholder) {
    if ($placeholder === '#_LOCATIONMAPWITHDIR') {
        if (function_exists('flexmap_show_map')) {
            if ($location->location_latitude && $location->location_longitude) {
                $result = flexmap_show_map(array(
                    'center'     => $location->location_latitude . ',' . $location->location_longitude,
                    'title'      => $location->location_name,
                    'directions' => 'true',
                    'width'      => get_option('dbem_map_default_width'),
                    'height'     => get_option('dbem_map_default_height'),
                    'region'     => 'au', // hint which region searches apply to
                    'echo'       => '0',  // return as a string
                ));
            }
            else {
                $result = '';
            }
        }
    }

    return $result;
}

And here it is on the page:

Events Manager locations page with custom map

Job is done, complete with directions.

Facebooktwittergoogle_plusredditlinkedinmailFacebooktwittergoogle_plusredditlinkedinmail