Customizing Infowindow Messages for Locations - WP Maps Pro

15000+ live websites are using this google maps wordpress plugin.

Customizing Infowindow Messages for Locations

Google Maps Example - WP Maps Pro

In WP Maps Pro, the Infowindow is the popup that appears when a user clicks a marker. With full HTML support and dynamic placeholders, you can design infowindows that match your brand and deliver key information visually.


๐Ÿ› ๏ธ Where to Customize Infowindow

  1. Go to WP MAPS PRO โ†’ Manage Maps.
  2. Edit the desired map.
  3. Scroll to the Infowindow Message for Locations section.

    Customize Infowindow Message for Location

  4. Select a layout template โ€” you can choose from multiple pre-built options.
  5. Customize the content using the HTML editor provided.
  6. Click on Apply Changes button to preview the changes.

๐Ÿ”ง Use HTML + Placeholders

You can add anything using HTML โ€” text, images, links, buttons, videos, or tables.

๐Ÿ“Œ Available Placeholders

Use these placeholders to dynamically populate your infowindow content:

  • {marker_id}, {marker_title}, {marker_image}
  • {marker_address}, {marker_message}, {marker_category}
  • {marker_icon}, {marker_latitude}, {marker_longitude}
  • {marker_city}, {marker_state}, {marker_country}, {marker_postal_code}
  • {marker_zoom}, {get_directions_link}

Conditional Logic:

You can even use conditional tags like:

{#if marker_city} <p>City: {marker_city}</p> {/if}

๐Ÿงฉ Show Extra Information in Infowindow

In addition to the core details (like title, address, or image), you can display unlimited custom data in the infowindow using Extra Fields.

Hereโ€™s how to do it:

  1. Go to WP MAPS PRO โ†’ Settings and scroll to the Create Extra Fields section.

    Add Extra Fields in WP Maps Pro

  2. Create a new field โ€” for example, Website, Phone, or Email.
  3. Next, edit your location and assign values to those extra fields.

    Assign Extra fields to Location

  4. Finally, use the fieldโ€™s placeholder in the infowindow editor โ€” for example, {website}, {phone}, {email}.

You can also wrap extra fields in conditional logic to prevent displaying empty values:

{#if website}
  <a href="{website}" target="_blank">Visit Website</a>
{/if}

This approach helps you keep infowindows clean, dynamic, and personalized for each location.

Need help? Submit a support ticket โ€” weโ€™d love to help you style your infowindows perfectly!

Was this article helpful?
YesNo

Install Plugin Now!

WP MAPS PRO helps you create dynamic, customizable maps using Google Maps or Leaflet โ€” no coding required. Includes free updates, premium support, and a 30-day money-back guarantee.