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
  • RobertB

    thank you for this tutorial…..I cannot get it to work….you reference in your text ” Single Location Page” template…are you referring to /plugins/events=manager/templates/templates/location-single.php? I don’t really understand this reference in the template page – ////
    * Remember that this file is only used if you have chosen to override location pages with formats in your events manager settings!

    * You can also override the single location page completely in any case (e.g. at a level where you can control sidebars etc.), as described here – http://codex.wordpress.org/Post_Types#Template_Files

    * Your file would be named single-location.php

    *//////

    Also, if I am on the correct template page, would I put your code AFTER ///////global $EM_Location;

    /* @var $EM_Location EM_Location */

    echo $EM_Location->output_single();

    ?>
    /////////////////////

    Thanks for your help.

    • http://snippets.webaware.com.au/ Ross McKay

      G’day RobertB,

      The Single Location Page template I refer to above is the one you edit in the admin:

      Events > Settings > Formatting > Locations

      The PHP code above can be placed either in a simple plugin, or in your theme’s functions.php file.

      cheers,

      Ross

      • RobertB

        Brilliant…thanks Ross for the quick reply….that did the trick….I ALSO added

        #_LOCATIONMAPWITHDIR to the single EVENT template to allow someone to get directions straight from the single event page listing…thanks mill….