14500+ website owners are using this wordpress map plugin

Buy Now - $89

Customizing Infowindow Messages for Locations

Infowindows play a vital role in providing location-specific information on maps powered by WP MAPS PRO. They allow users to view important details about a place with just a simple click. While the “Basic fields” like location title, city, country, and address provide essential information, WP MAPS PRO offers an extra layer of customization with “Extra Fields”. These user-defined fields enable you to display any additional data you desire, such as phone numbers, fax, emails, custom HTML, image sources, or video URLs.

In this guide, we will explore how to create custom Infowindow messages using extra fields to enhance the user experience and make your maps more informative and engaging.

Understanding Basic Fields and Extra Fields

Before diving into customization, let’s understand the distinction between basic fields and extra fields. Basic fields are the default attributes, such as location title, city, and country, that WP MAPS PRO provides for every location. On the other hand, extra fields are dynamic data tags created by users to include personalized information for each location.

This plugin provides the following basic fields to be used.

  • {marker_id}: This field represents a unique identifier for each location marker on the map.
  • {marker_title}: The title or name of the location, which will be displayed as the main heading in the Info window.
  • {marker_address}: The street address of the location, helping users to easily identify and locate the place.
  • {marker_latitude}: The latitude coordinate of the location, determining its vertical position on the map.
  • {marker_longitude}: The longitude coordinate of the location, determining its horizontal position on the map.
  • {marker_city}: The city in which the location is situated, providing additional context to users.
  • {marker_state}: The state or province where the location is located, if applicable.
  • {marker_country}: The country in which the location is situated, adding global context to the information.
  • {marker_postal_code}: The postal or ZIP code of the location, aiding in specific geographical identification.
  • {marker_zoom}: The zoom level at which the map will display this location marker, determining its initial magnification.
  • {marker_icon}: The icon or image that represents the location marker on the map.
  • {marker_category}: The category to which the location belongs, allowing users to filter or group markers based on similar attributes.
  • {marker_message}: A brief message or description related to the location, providing additional information to users.
  • {marker_image}: An image associated with the location, which can be displayed in the info window for a visual representation.

Setting Up Extra Fields in WP MAPS PRO

To get started, follow these simple steps to create extra fields for your locations:

  1. Access your WordPress admin dashboard and navigate to WP MAPS PRO > Plugin Setting.
  2. Look for the “Create Extra Fields” section.
  3. Define the field name, and click on “Add more” to add more extra fields.
  4. Click on “Save Settings” 

With the extra fields set up, you can now proceed to use these extra fields to customize your Infowindow messages.

Customizing Infowindow Messages with Basic & Extra Fields

Utilizing the basic and extra fields in your infowindow messages is straightforward. Insert dynamic data tags within the Infowindow message template to display the relevant information for each location. For instance, use {phone} to show the phone number, {email} for the email address, or even embed an image using {image_src}.

    • Go to the “Manage Maps” section and choose the map you want to edit.
    • In the map editor, find the “Infowindow Message for Locations” section.
    • Using Basic Fields:
      • Use these placeholders within curly braces to display location information:
        • {marker_title}: Location title or name.
        • {marker_address}: Street address.
        • {marker_city}: City name.
        • {marker_country}: Country name.
        • {marker_zoom}: Map zoom level, if needed.
        • {marker_icon}: Marker icon or image.
    • Using Extra Fields:
      • If you’ve created extra fields, use their names within curly braces to show additional data.

Dynamically Adding Extra Fields to Locations with WordPress Hook

WordPress hooks provide a powerful way to modify data and customize functionality in plugins. In the case of WP MAPS PRO, you can leverage the ‘wpgmp_markers’ filter to dynamically add extra fields to your locations. In this guide, we’ll explain how to use this filter along with a custom callback function to achieve this functionality.

// Define your custom callback function to modify the data
function custom_wpgmp_markers_filter($filterd_places, $map_id) {
    // Your custom filtering logic here
    // Modify the $filterd_places array as needed
	// Assuming $places is the array containing the places data
	foreach ($filterd_places as &$place) {
		
		// Check if 'dynamic_extra_field' exists in the 'extra_fields' subarray
		if (!isset($place['location']['extra_fields']['dynamic_extra_field']) or empty($place['location']['extra_fields']['dynamic_extra_field'])) {
			// 'dynamic_extra_field' exists, do nothing, it already has a value
			$place['location']['extra_fields']['dynamic_extra_field'] = 'This is dynamic value';
		}
	}

// Now the $places array has been modified with the default value for 'dynamic_extra_field' if it was missing

    // Return the modified array
    return $filterd_places;
}

// Add the custom callback function to the 'wpgmp_markers' filter
add_filter('wpgmp_markers', 'custom_wpgmp_markers_filter', 10, 2);

By following these steps, you can easily use both basic fields and extra fields to create custom infowindow messages for each location on your WP MAPS PRO-powered map. This will make your map more informative and engaging for users.

Was this article helpful?
YesNo

Install Plugin Now!

This plugin is exclusively available at codecanyon.net. You'll get free updates and full support to use this plugin.