wpgmp_marker_size

The “wpgmp_marker_size” hook in WP Maps Pro allows developers to customize the marker sizes for different screens at runtime. This can be particularly useful for ensuring that markers are displayed appropriately on devices with varying screen resolutions, like mobile, desktop, and retina displays.

Usage

Developers can implement this hook in their theme’s functions.php file or a custom plugin. It provides the flexibility to adjust marker sizes by modifying the default sizes passed to the hook. This allows for improved display and usability of maps across different devices.

Example 1

This example demonstrates how to change the marker size for mobile screens to 30px width and 30px height.

add_filter('wpgmp_marker_size', 'custom_mobile_marker_size');
function custom_mobile_marker_size($default_sizes) {
    $default_sizes['mobile'] = [30,30];
    return $default_sizes;
}

Example 2

In this scenario, the marker size for desktop screens is increased to 40px × 30px, enhancing visibility on larger displays.

add_filter('wpgmp_marker_size', 'custom_desktop_marker_size');
function custom_desktop_marker_size($default_sizes) {
    $default_sizes['desktop'] = [40,30];
    return $default_sizes;
}

Example 3

This example focuses on optimizing marker size for retina displays, setting it to 70px × 70px for sharper image quality.

add_filter('wpgmp_marker_size', 'custom_retina_marker_size');
function custom_retina_marker_size($default_sizes) {
    $default_sizes['retina'] = [70,70];
    return $default_sizes;
}

Tip: Always test your changes on multiple devices to ensure consistency and usability across different screen sizes. You may use different values for width and height (e.g., [50, 60]) if your marker image is not square. Proper validation and sanitization of any inputs or settings are crucial for maintaining security and performance.