wpgmp_marker_image_markup_post

The wpgmp_marker_image_markup_post hook in WP Maps Pro allows developers to customize the HTML output of a marker image when the marker is associated with a post location. It provides flexibility to modify the marker image’s HTML markup dynamically.

Usage

Developers can implement this hook in their theme’s functions.php file or a custom plugin. This hook is particularly useful when there is a need to alter the display attributes or add additional attributes to the marker image HTML based on specific criteria or conditions.

Example 1

In this example, we’ll add a custom CSS class to the marker image HTML for styling purposes.

add_filter( 'wpgmp_marker_image_markup_post', 'custom_marker_image_class', 10, 4 );

function custom_marker_image_class( $post_featured_image, $featured_image, $image_alt, $map_id ) {
    return '<img src="' . esc_url($post_featured_image) . '" alt="' . esc_attr($image_alt) . '" class="custom-marker-class">';
}

Example 2

This example demonstrates how to add a data attribute to the marker image HTML, which can be used for JavaScript interactivity.

add_filter( 'wpgmp_marker_image_markup_post', 'add_data_attribute_to_marker', 10, 4 );

function add_data_attribute_to_marker( $post_featured_image, $featured_image, $image_alt, $map_id ) {
    return '<img src="' . esc_url($post_featured_image) . '" alt="' . esc_attr($image_alt) . '" data-map-id="' . esc_attr($map_id) . '">';
}

Example 3

Here, we modify the HTML to include a tooltip displaying the post title when hovering over the marker image.

add_filter( 'wpgmp_marker_image_markup_post', 'marker_image_with_tooltip', 10, 4 );

function marker_image_with_tooltip( $post_featured_image, $featured_image, $image_alt, $map_id ) {
    $post_title = get_the_title($map_id);
    return '<img src="' . esc_url($post_featured_image) . '" alt="' . esc_attr($image_alt) . '" title="' . esc_attr($post_title) . '">';
}

Tip: Always ensure that data is properly sanitized and escaped when modifying HTML to prevent security vulnerabilities such as XSS (Cross-Site Scripting).