Skip to main content

Modifying Event Location Google Maps

"How do I modify the centering of the maps?"
"How can I do x to the maps?"

These are very common (and valid) questions! Currently, integration with Google Maps is fairly limited and is something we intend to remedy in the future. However, as always we try to make it possible for developers to do their thing in a upgrade-safe manner.

How Google Maps work in Events Manager​

Firstly, let me quickly explain how maps work in Events Manager (this will probably go into documentation rather than tutorials in the future).

Google Maps itself is loaded and handled purely by javascript, all of it located within the includes/js/events-manager.js file (or events-manager-source.js for viewing purposes 4.0 onwards). When maps are "created" by Events Manager, it just creates the grey loading map div class and a couple of other elements with some data for the javascript to retrieve and use to build the maps. Here's what's output by a single event map:

<div id="em-location-map-f3d18" class="em-location-map" style="background: #<span class=;">CDCDCD; width: 400px; height: 300px">Loading Map....</div>
<div class='em-location-map-info' id='em-location-map-info-f3d18' style="display:none; visibility:hidden;">
<div class="em-map-balloon" style="font-size: <span class=;">12px;"></div>
        <div class="em-map-balloon-content" >Balloon Content Here</div>
    </div>
</div>
<div class='em-location-map-coords' id='em-location-map-coords-f3d18' style="display:none; visibility:hidden;">
    <span class="lat">123</span>
    <span class="lng">123</span>
</div>

As you can see there's two hidden divs with the balloon contents and also some coordinate information for Google Maps to center on. When a page is loaded, the javascript checks for the location map divs by class and loads google maps only if it finds one.

After loading the map, a specific jQuery event is triggered, called em_maps_location_hook, which passes the map data onto event listeners.

Modifying maps with javascript​

To make modifications via javascript, you need to bind a function to this javascript event, you can do this at any point in your theme or in another javascript file:

jQuery(document).on('em_maps_location_hook', function( e, map, infowindow, marker ){
    ....
});

The three variables this function accepts are:

  • map - this is a Google Maps Map object
  • infowindow - a Google Maps InfoWindow object attached to marker
  • marker - the Google Maps Markerobject attached to map

The map has been loaded, so at this point the changes you make are final.

For the global maps, it's the same principle, except the hook is called em_maps_locations_hook and one variable is supplied which is an array of markers.

Modifying maps with templates​

The HTML generated resides in two files that you can override using template files to customize the HTML, and you could even remove the classes that trigger the Javascript and handle it yourself. The maps templates are located in two places:

  • templates/map-global.php - this is the multi-locations map
  • placeholders/locationmap.php - this is #_LOCATIONMAP placeholder