wpgmp_container_css_class

The wpgmp_container_css_class hook in WP Maps Pro allows developers to customize the CSS class of the map container dynamically. This hook is triggered when the map is being rendered, providing an opportunity to modify the container’s HTML class attribute.

Usage

Developers can implement this hook in their theme’s functions.php file or in a custom plugin. It is useful when you need to add specific styling or JavaScript targeting to map containers based on different conditions or attributes.

Example 1

Use this hook to add a unique CSS class to the map container based on the map ID.

add_filter( 'wpgmp_container_css_class', function( $classes, $map ) {
    $classes .= ' custom-map-class-' . $map->map_id;
    return $classes;
}, 10, 2 );

Example 2

Add a conditional class to the map container if the map has a specific attribute, such as a certain zoom level.

add_filter( 'wpgmp_container_css_class', function( $classes, $map ) {
    if ( $map->zoom_level > 10 ) {
        $classes .= ' high-zoom-level';
    }
    return $classes;
}, 10, 2 );

Example 3

Append a class to all map containers for further customization or tracking purposes.

add_filter( 'wpgmp_container_css_class', function( $classes, $map ) {
    $classes .= ' global-map-class';
    return $classes;
}, 10, 2 );

Tip: Always ensure that the classes you add do not conflict with existing styles and consider using unique prefixes for custom classes to avoid potential clashes with other plugins or themes.