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!

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

/**
* add Events Manager location placeholder for map directions
* @param string $result
* @param EM_Location $location
* @param string $placeholder
* @return string
*/
function filterLocationOutputPlaceholder($result, $location, $placeholder) {
    if ($placeholder == '#_LOCATIONMAPWITHDIR') {
        if (class_exists('FlxMapPlugin')) {
            if ($location->location_latitude && $location->location_longitude) {
                $map = FlxMapPlugin::getInstance();
                $result = $map->getMap(array(
                    'center' => $location->location_latitude . ',' . $location->location_longitude,
                    'title' => $location->location_name,
                    'directions' => 'true',
                    'width' => '',      // set by stylesheet
                    'height' => '',     // set by stylesheet
                    'region' => 'au',   // hint which region searches apply to
                ));
            }
            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_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail