Style your Google map

Event Organiser 2.10.0 was released a couple of weeks ago, and I wanted to cover a very simple change included in that update but gives you much greater control over how Event Organiser’s (Google) maps appear on your site. That is support for Google map styles.

Google Maps Styles property

The Google maps styles property is detailed here, and there is even an incredibly helpful “Styled Map Wizzard” which allows you to (relatively) quickly manipulate every detail of the map.

For Pro users this will also apply to event maps

As you may have noticed, however, the final style object is a JSON object, whereas the methods for setting the styles of maps in Event Organiser are PHP based. So you may find it helpful to make use of this JSON to PHP array converter.

The resulting PHP array equivalent of a Google map styles object will look something like:

$styles = array (
    array (
        'stylers' => array (
            array ( 'hue' => '#00ffe6' ),
            array ( 'saturation' => -20 ),
        ),
    ),
    array (
        'featureType' => 'road',
        'elementType' => 'geometry',
        'stylers' => array (
            array ( 'lightness' => 100 ),
            array ( 'visibility' => 'simplified' ),
        ),
    ),
    array (
        'featureType' => 'road',
        'elementType' => 'labels',
        'stylers' => array (
            array ( 'visibility' => 'off' ),
        ),
    ),
);

The above array is a PHP version of the example Styles option given on Google’s map styles page.

Applying the style to your maps

There are two ways of setting a map’s style:

“Global” method

This method will apply to all Google maps generated by Event Organiser.

You use the eventorganiser_venue_map_options filter to set every maps parameters (specifically the styles one) as shown below:

function my_set_google_map_style( $map_args ){
    $styles = array (
        array (
            'stylers' => array (
                array ( 'hue' => '#00ffe6' ),
                array ( 'saturation' => -20 ),
            ),
        ),
        array (
            'featureType' => 'road',
            'elementType' => 'geometry',
            'stylers' => array (
                array ( 'lightness' => 100 ),
                array ( 'visibility' => 'simplified' ),
            ),
        ),
        array (
            'featureType' => 'road',
            'elementType' => 'labels',
            'stylers' => array (
                array ( 'visibility' => 'off' ),
            ),
        ),
    );

    $map_args['styles'] = $styles;

    return $map_args;
};
add_filter( 'eventorganiser_venue_map_options', 'my_set_google_map_style' );

Using the eo_get_venue_map() argument

The function eo_get_venue_map() (see codex) will now accept the ‘styles’ parameter in the passed argument. This allows you to set the style of a specific map which you display using the eo_get_venue_map() function.

$styles = /*... as set above ...*/;
echo eo_get_venue_map( 
     array( 'london-eye', 'edinburgh-castle' )
     array( 
       'styles' => $styles,
     ),
);