Themify Maps Pro - WordPress Plugin

A Practical Guide to Setting Up Themify Maps Pro for Maps, Markers, and Visitor Directions

Themify Maps Pro is an add-on for Themify Builder designed for more than dropping a single map onto a page. It helps you build a polished interactive map block with multiple points, custom markers, tooltips, map styles, and on-page behavior controls. This guide walks through the practical workflow: checking compatibility, installing the add-on, configuring the map for a real use case, validating the result, troubleshooting common issues, and deciding when an alternative makes more sense.

This article is written for a WordPress site owner, content manager, or webmaster who already works with Themify Builder or is willing to use it specifically for map-based content. It does not repeat the product listing. Instead, it breaks the map down into practical decisions: where to place the module, how to choose the base address, when to enable scrolling, how to avoid overloading a page with multiple maps, what to do with markers, and how to confirm that visitors actually understand where they need to go.

Special attention is paid to limitations. Themify's official Maps Pro documentation notes limits on the number of maps and markers per page, and the Google Maps JavaScript API has its own requirements for API keys, billing, domain restrictions, and console errors. In other words, proper setup here is not just about making the map look good. It is also about verifying that it works clearly and reliably on the live page.

Where Themify Maps Pro Is Most Useful

The main strength of Themify Maps Pro is that it works inside the familiar Themify Builder environment. If your site pages are already built with Builder, the map becomes part of the overall layout: you can place it next to text, contact blocks, buttons, service sections, schedules, or galleries. That is different from a standalone mapping plugin, where the map is often created on a separate admin screen and then inserted with a shortcode or block.

The product is especially useful when the map is meant to support a specific section of a page rather than function as a standalone location directory. For example, on a "Contact" page you might show the office, parking, and a courier entrance; on a tour page, several route stops; on an event landing page, the venue, nearest subway station, and check-in point; on a store network page, several key branches without a full searchable database.

Themify's documentation confirms several important capabilities: the module can be added from the add-on modules panel, works in both backend and frontend edit mode, lets you choose the map type, size, style, draggable mode, zoom, controls, and scrollwheel settings, define a base map address, and add marker addresses, tooltip text, and custom icons or images. That creates a typical working flow: first define the map area, then add markers, then tune the visual style and visitor behavior.

Maps Pro should not be treated as a universal store locator for a large chain with radius search, categories, bulk imports, and advanced filters unless those features are clearly confirmed in your version and documentation. For that type of job, it is better to evaluate specialized tools early. But for a design-integrated map on a page, where appearance, a handful of markers, and behavior control matter, this add-on is a logical extension of Themify Builder.

Common Scenarios Where the Module Works Best

When planning a map, it helps to start not with the visual style but with a simple question: what should the visitor do after viewing the map? That answer affects everything - the number of markers, zoom level, block height, tooltip text, and even whether mouse-wheel zoom should be enabled.

• Small business contact page. One primary marker, a short tooltip, a clear map height, and scrollwheel disabled so the user does not get stuck interacting with the map while trying to scroll the page.
• Route with multiple stops. Several markers, distinct labels, and if your version supports it, a visual line connecting points along the route.
• Event landing page. A venue marker, an entrance marker, and a separate tooltip for parking or the registration point.
• Travel or restaurant guide. Several themed points, custom icons, and a map style that does not clash with the page design.
• Project or case study page. The map helps show the project's geography, but it should not distract from the main story.

If you need a directory with dozens or hundreds of places, filters, current-location search, spreadsheet import, and a separate page for each point, Maps Pro may be too narrow for the job. That is not a flaw. It is simply built for a different class of task: the add-on works best as a visual page module.

What to Check Before Installing the Add-on

Before installing Themify Maps Pro, make sure your site is actually ready for a Themify Builder add-on. Themify's official documentation says Builder Addons require Themify Builder and can be used with an up-to-date Themify theme or the Builder plugin. So the first check is not whether you have room on the page, but whether the required infrastructure is already in place.

Compatibility With Your Current WordPress Setup

Check how pages are currently built on the site. If your main contact page is built with Gutenberg blocks, Elementor, or another page builder and Themify Builder is not being used, adding Maps Pro just for one map may complicate the stack. Technically WordPress allows multiple plugins, but every extra builder increases the burden on editing, updates, and troubleshooting. If the site already uses a Themify theme, Builder, or Themify layouts, the add-on fits in naturally.

It is also worth opening the page where the map will go and reviewing its structure in advance: container width, presence of a sidebar, section height, mobile stacking order, and placement next to contact details or a form. Maps Pro lets you set map width and height, but the final experience still depends on the surrounding page layout.

Map Data

Do not start with a blank map. Prepare the data first, otherwise setup turns into trial and error with random addresses and markers. At minimum, have the following ready:

• The main address or area the base map should focus on.
• A list of markers with exact addresses or coordinates if the address is not reliably recognized.
• Short tooltip labels with useful information, not marketing slogans.
• Marker icons in a consistent style and at an appropriate size.
• A clear idea of which controls the visitor actually needs: zoom, dragging, scrolling, and map type.

For a map with multiple points, decide ahead of time whether there is one primary location. If all markers matter equally, it is usually better to center the base map on the area that includes all of them. If one point is the main destination, the base map can focus on that point and use the others as supporting landmarks.

Google Maps and External Service Limits

Maps Pro displays the map through an external mapping service. If your site configuration uses Google Maps, it is worth understanding the basic Google Maps JavaScript API troubleshooting flow before you begin: API key errors, billing problems, domain restrictions, and API loading issues show up in the browser console and can sometimes result in a dimmed map with a warning overlay. Those issues are not fixed in the page content. They are handled in your Google Cloud project, the API key configuration, and domain restrictions.

Practical check: after installation, open the map page in an incognito window and inspect the browser console. If the map does not load, look for Google Maps API errors first before changing styles, height, or markers in the module.

Installation and First Validation in WordPress

Themify describes Builder Addons installation as a standard WordPress plugin install via ZIP archive: download the add-on file, go to the admin dashboard, open Plugins - Add New, choose Upload Plugin, upload the ZIP, and activate it. WordPress.org also documents ZIP upload as the normal installation method for plugins. It is important not to confuse add-on installation with importing demo content. Those are separate actions.

After activation, do not jump straight to the live page. First confirm that Themify Builder recognizes the add-on. Open a test page, enable Builder, and check whether the Maps Pro module appears in the modules panel under add-on modules. If it does not appear, the issue is usually at the level of activation, Builder version, admin caching, or a plugin conflict, not the map settings themselves.

Minimum Test After Activation

1. Create or open a test page, not a live page that already gets traffic.
2. Enable Themify Builder in backend or frontend edit mode.
3. Add an empty row or section so you do not disrupt the existing layout.
4. Open the modules panel and find Maps Pro in the add-on modules section.
5. Drag the module into the row and set a base address, map type, height, and one marker.
6. Save Builder and open the page in a new window outside edit mode.

This test helps you separate three different layers of failure: whether the add-on is installed, whether the module works inside Builder, and whether the map renders on the public site. If you skip the test page and go straight to editing your main contact page, it becomes much harder to pinpoint where things went wrong.

Importing the Demo Layout

Themify's documentation says each add-on ZIP includes a sample folder with a Builder data file that you can import to see how the demo was built. That is useful as a learning reference, but not as a required step for a working page. It is better to import the demo into a separate page or draft, because the sample layout may add extra blocks, text, and settings your site does not need.

If you do import the sample layout, treat it as a reference: see which fields are used, how the markers are placed, which controls are disabled, and how the map height is handled. Do not copy every value mechanically. Themify's demo shows different styles and modes, but your live page needs to serve your address, your use case, and your audience.

Configuring the Map After Installation: Settings That Affect the Result

The biggest mistake when configuring maps is jumping straight to visual styling and forgetting about behavior. Maps Pro has several groups of settings, and each one controls a different layer of the result: geographic focus, visual style, block size, interactivity, controls, and markers. It is best to work through those groups in the same order a visitor experiences them.

Base Map Address and Focus Area

Base Map Address defines the area the map focuses on when it first loads. That does not have to be the same as the first marker address. For a single office, it is straightforward: the base map matches the office address. For multiple points, choose an area or central point that immediately gives the visitor useful context. If the base address is too narrow, some markers may sit outside the first view. If it is too broad, the visitor may not understand which point matters most.

After saving, review the map outside edit mode. Check whether the primary marker is visible without any manual panning. If not, adjust the base address and zoom. Do not try to compensate for poor map focus with tooltip text alone: the visitor sees the map first, and only sees the tooltip later.

Map Type and Style

The official product page lists four map types: Road Map, Hybrid, Satellite, and Terrain. The documentation also mentions a choice of more than forty styles. The map type determines the visual data source, while the style controls how it is presented. For contacts, offices, stores, and city routes, Road Map is usually easiest to read. Satellite is useful when real-world landmarks matter: a business complex, an entrance from the parking area, a natural site, or an event venue. Hybrid combines satellite imagery with labels. Terrain makes sense when topography helps explain the location.

Style should not be chosen just because it looks "nice." A very dark map may look dramatic on a landing page but become harder to read next to small labels and markers. A very light map may lose visual emphasis. A simple rule works well: the visitor should be able to recognize streets, markers, and tooltips faster than they notice the design treatment.

Map Dimensions: Width, Height, and Layout Placement

Maps Pro lets you adjust width and height. Width is often left dependent on the container, while height is chosen based on the use case. For a contact block, a short map roughly matching the neighboring text can look tidy, but it may be inconvenient for multiple markers. For a route or grouped set of locations, a taller map usually works better, otherwise markers end up too close to the edges.

Do not test only on a desktop screen. On mobile devices, a tall map can take over the screen, and enabled dragging or scrolling can interfere with normal page scrolling. If the map sits between important text sections, it is better not to make it too tall and to place clear context text before and after it.

Draggable, Scrollwheel, and Map Controls

These settings have the biggest impact on usability. Themify's documentation lists draggable mode, zoom, map controls, and scrollwheel. On a page with a lot of text, enabled map scrolling can be annoying: the user spins the wheel to read the page, but the map zoom changes instead. That is why it often makes sense to disable scrollwheel for a contact block. On a standalone route page where the map is the main feature, leaving it enabled may be appropriate.

Draggable should be chosen based on context. If the map is small and used mostly as a reference, dragging may not be necessary. If the user is expected to explore the surrounding area, enabling dragging makes more sense. Themify's demo includes a mode where dragging is enabled only on desktop, which reflects practical logic well: moving the map is comfortable on a large screen, while on mobile it may interfere with vertical scrolling.

How to Choose Core Themify Maps Pro Settings Based on Page Type

Scenario	Map Focus	Behavior	Validation
Single-office contact page	Office address with a moderate zoom level	Scrollwheel usually disabled, minimal controls	The marker is visible immediately, and the map does not interfere with page scrolling
Several locations in one city	An area that includes all markers	Draggable can be enabled, and a taller map is usually better	All important points are easy to find without lengthy searching
Route or location collection	The route area, not one random marker	Controls are useful, scrollwheel depends on page length	The user understands the order or logic of the points
Event landing page	The venue and nearby landmarks	Moderate height, short tooltips	The entrance, parking, or check-in point is easy to identify

After choosing the settings, save the page and check the result in two states: as a normal visitor who is not logged into the WordPress dashboard, and as an editor with Builder enabled. If the map works only in edit mode, that is a strong signal to check caching, scripts, API errors, and optimization conflicts.

Markers, Tooltips, and Custom Icons: How to Make the Map Easy to Understand

Markers are the most noticeable part of a map. Themify's official sources say Maps Pro supports unlimited location markers, custom marker icons or images, and marker tooltip text pop-ups. At the same time, the documentation includes a practical warning for page usage: only a limited number of markers and maps should be placed on a single page. So the editor's job is not to place as many points as possible, but to choose the ones that actually help the visitor make a decision.

Marker Address and Position Accuracy

If the address is ambiguous, the mapping service may place the marker incorrectly. For office parks, shopping centers, large parks, or areas with similar street names, verify the point after saving. Do not assume that because the address was accepted in the module field, the result is correct. Open the public page, zoom in, and compare the marker position to the actual entrance or landmark.

For a complicated location, it is often better not to overload the tooltip with long text. Instead, place a normal HTML block next to the map: "Entrance from Main Street...", "Parking behind the building...", "Courier entrance..." That text is indexable, easier to edit, and does not depend on the user clicking a marker.

Tooltip Text: What to Write

A tooltip should answer one question: why is this marker on the map? Do not repeat the same company name in every tooltip. A short functional label usually works better:

• Main office - entrance at the corner of the building.
• Guest parking - first 30 minutes validated.
• Pickup point - desk to the right of reception.
• Tour starting point - meet by the fountain.

If a tooltip grows beyond two short sentences, move the details into the text next to the map. The map should help people orient themselves, not replace the entire instruction set.

Custom Icons or Images for Different Point Types

Users read icons faster than text. If the map contains several types of points, use different but stylistically related icons: office, parking, entrance, route stop. Do not mix random images with inconsistent sizes and colors. A simple system works best: one color for the primary point, a neutral color for supporting points, and a separate symbol for warnings or secondary locations.

Before uploading icons, check their contrast. On a light map, a pale icon may disappear. On a dark map, a thin dark icon can be lost just as easily. If you are using a brand color, make sure it remains readable against the selected style. Sometimes it is easier to change the map style than to fight with the markers.

How Many Markers to Place on One Page

Themify's official documentation includes a specific warning about the limit on maps and markers per page. Even if you technically want to show more, a large number of markers often hurts clarity in real user scenarios. For a standard contact page, one location and a couple of reference points are usually enough. For a mini-guide or route page, you can use more, but every marker should serve a purpose.

If you find yourself adding ten or more points with very similar labels, that is usually a sign you do not need a map on a landing page. You need a different structure: a location directory, filters, search, categories, or a specialized map plugin. Themify Maps Pro works best when the editor controls each point manually and understands why it is there.

How to Use Themify Maps Pro in a Real-World Scenario

Let us walk through a practical example: you need to build a map for the contact page of a small studio with a main office, guest parking, and a separate courier entrance. The goal is not just to display the address, but to reduce the number of questions customers ask before visiting.

Goal

The page should display a block with short contact text and business hours on the left, and a map with three markers on the right. The primary marker shows the office, the second shows parking, and the third shows the courier entrance. The visitor should immediately understand where to go, where to park, and where to find the correct entrance.

Preparation

Before you begin, confirm that Themify Builder is active, Maps Pro is installed, and the module is visible in the add-on modules panel. Prepare three addresses or refined points, three short labels, and three icons. If separate internal addresses within the same building are not recognized well by the map, use the main address for the base map and explain the distinctions with tooltip text and a nearby text block.

Configuration Steps

1. Open the contact page and enable Themify Builder.
2. Add a two-column row: one text block and one Maps Pro block.
3. Insert Maps Pro into the right column and set the Base Map Address to the studio's main address.
4. Choose Road Map if streets and access routes matter most, or Hybrid if the user needs visual building landmarks.
5. Set the map height so it matches the neighboring contact block or is slightly taller.
6. Disable scrollwheel if the map sits inside a long page.
7. Add the first marker for the main office with a short tooltip.
8. Add the second marker for parking and the third for the entrance, using different custom icons.
9. Save Builder and open the page outside edit mode.

Validation

On the public page, check five things. First, all three markers should be visible or easy to find after only minimal movement. Second, the primary marker should not get lost among the supporting ones. Third, the tooltips should open properly and should not cover important parts of the map. Fourth, the mouse wheel should not disrupt page scrolling. Fifth, on mobile the map should not take up too much vertical space or make it harder to reach the phone number, form, or route button.

A Common Issue That Gets in the Way

If the map looks fine in Builder after saving but does not load on the public page, do not start by changing addresses or markers. Open the browser console first and check for Maps JavaScript API errors, caching issues, or script optimization problems. Then temporarily disable minification or deferred script loading in your optimization plugin if it affects mapping scripts. Restore settings one at a time so you do not lose track of the cause.

Quick takeaway: a good Maps Pro setup starts with the visitor's task. The address, markers, height, style, and controls should all answer one question: "How can the person orient themselves on the page faster?"

The "Setting - Result" Workflow: How to Check the Map After Every Change

A map can look correct in the admin area but behave differently on the public site. Themify Builder supports both backend and frontend edit mode, and Maps Pro includes backend preview support. That is convenient, but preview is not a substitute for checking the real page. Every map depends on external scripts, container dimensions, the theme, caching, optimization, API domain restrictions, and browser behavior.

Check as a Normal Visitor

Open the page in a new window where you are not logged into WordPress. If that is not convenient, use a private browser window. Make sure the admin bar is not visible at the top, because it changes the viewport height and can sometimes hide positioning issues. Look at how quickly the map appears, whether the markers are visible, and whether tooltips overlap neighboring elements.

Check at Different Widths

You do not need to test every device. Three checkpoint states are enough: a wide desktop screen, a tablet-width view, and a narrow mobile screen. On desktop, you are validating the composition next to the text. On tablet, the most common issue is an overly narrow column. On mobile, height, scrolling, and block order matter most.

If the map sits next to a contact form, it is usually better on mobile to show the short address and phone number first, then the map below. Otherwise, the user may spend too long scrolling past the map before reaching the form or call-to-action button.

Check With Cache and Optimization Enabled

Cache plugins, deferred JavaScript loading, and minification can interfere with map scripts. If the map disappears only for visitors but remains visible for administrators, check caching first. Clear the page cache, the optimization plugin cache, and the CDN cache if one is in use. Then disable optimizations selectively, starting with script combining and deferred loading on the map page.

Do not permanently disable all site optimization because of one map. It is usually safer to create an exception for the contact page or for the specific script if your optimization tool allows it. If the exact script name is not clear, record your findings in project notes and refer to the optimizer documentation.

Practical Ways to Use Maps on Different Page Types

Maps Pro is more useful when the map is not added just "for visual appeal" but plays a concrete role. Below are several scenarios you can build without inventing unsupported features. All of them rely on the module's core capabilities: multiple markers, custom icons, tooltips, map types and styles, dimensions, zoom, and controls.

Contact Page With Multiple Landmarks

A standard contact page becomes much clearer when the main address is paired with orientation points. One marker shows the office, another shows parking, and a third marks the entrance or nearest transit stop. In the tooltip, do not write "Our office." Write the action: "Entrance through the archway," "Guest parking," "Stop near the entrance."

Event Route Map

For a conference, tour, festival, or city event, you can display multiple points: meeting area, registration, main venue, rest zone. If a line between points is available in your version and clearly supported by the interface, use it carefully. If not, explain the sequence in a normal list next to the map. Do not force the map to act like a schedule.

Location Collection on a Guide Page

For a restaurant, travel, or local guide, the map can become a navigation hub. But this is also where it is easy to overload the page. Group places by purpose: "food," "entertainment," "viewpoints." If there are too many types, it may be better to create several separate maps in different sections while still staying within Themify's recommended page limits.

Map in a Case Study or Portfolio

Sometimes the map is needed not for directions but for context: where the project is located, what area the work was done in, or what geography the project covers. In that case, one marker, a calm style, and disabled scrollwheel are usually enough. The map should support the story, not compete with photos and text.

Dynamic Data, Builder Pro, and the Limits of Automation

The Maps Pro documentation includes a separate note about Builder Pro Dynamic. If Builder Pro is activated, some fields may display a Dynamic toggle that lets you output data from post metadata, shortcodes, custom fields, and fields created by other plugins such as Post Type Builder or Advanced Custom Fields. At the same time, Themify explicitly notes that not every field gets a Dynamic option if the feature is unavailable or incompatible. That detail matters: dynamic mode expands what you can do, but it does not automatically turn Maps Pro into a full location management system unless the specific fields support it.

In practice, that means the following. If you have a single contact page, dynamic mode is unnecessary. It is simpler to configure the base map, markers, and tooltips manually. But if your site has a post type for "Branches," "Properties," "Projects," or "Events," dynamic fields may help connect record data to a Builder Pro layout. Still, you should not design that workflow blindly. First open the actual Maps Pro module, check which fields expose Dynamic, and only then design the data structure around it.

When Dynamic Fields Make Sense

A dynamic approach is useful when the map is reused across several similar pages. For example, a real estate agency may build a property page where the address comes from a custom field; an event organizer may use it for venue pages; a construction company's portfolio may use it for project pages with location data. In those cases, the editor should not have to rebuild the entire block manually every time if the core information already exists in post fields.

But a dynamic approach comes with one non-negotiable condition: the data must be clean. Addresses should be entered in a consistent format, tooltips should not turn into long paragraphs, and icons should either be fixed or driven by a clear field. If editors type addresses inconsistently, automation will only make errors appear faster.

When a Manual Map Is Better

Manual configuration is better when the map is created once and needs to be carefully designed. Examples include a restaurant landing page, a salon page, a dedicated event page, or a neighborhood mini-guide. In those use cases, composition, tooltip wording, style, and harmony with adjacent blocks matter more than automatic population. A manual map is also easier to validate: the editor sees every marker and understands why each one is on the page.

Do not enable dynamic mode just because it sounds more advanced. Automation is useful when you have a repeatable process, several similar pages, and a stable data model. For a one-off page, it only adds dependencies on fields, templates, and third-party plugins.

How to Safely Test a Dynamic Scenario

1. Create a test post or test page with the same set of custom fields that will be used in the live scenario.
2. Open Builder Pro and add the Maps Pro module to that record's layout.
3. Check whether Dynamic appears on the exact field you need: address, tooltip, title, or another value.
4. Insert one field at a time and save after each change.
5. Open the public page and confirm that the map focuses on the correct area and the marker does not disappear.
6. Create a second test record with a different address to confirm that the template is not tied to the first example.

If the Dynamic option does not appear on the setting you need, do not try to work around it with a random shortcode or unverified code injection. It is safer to leave that value manual, adjust the page model, or consult the Builder Pro documentation. In a Maps Pro article, it is better to set honest automation boundaries than to promise a workflow the actual interface does not support.

Mobile Map Version: What to Check Before Publishing

Maps often look convincing on a desktop monitor and awkward on a phone. The reason is not Maps Pro itself, but the nature of interactive maps: they take up a lot of space, respond to gestures, contain small labels, and depend heavily on container height. That is why mobile validation should be a separate step, not a quick glance after publishing.

Block Order on a Narrow Screen

If the map sits next to text in a two-column layout, those columns usually stack on mobile. Make sure the order still makes sense. For a contact page, it is usually more convenient to show the address, phone number, short directions, and contact button first, and place the map below. For a route page, the map can come first, but it should still be paired with a short explanation of what is marked on it.

The problem appears when a large map lands between the heading and the key contact information. The user opens the page, sees only the map, and has to scroll to find the phone number or business hours. If the map helps people get there but hides the way to contact you, the page becomes less practical.

Map Height and Gestures

On a phone, a tall interactive map can fill nearly the entire screen. If dragging is enabled, the user may try to scroll the page but end up moving the map instead. If gesture zoom is active, the map may zoom accidentally. For smaller maps on contact pages, it is usually better to choose a moderate height and test how easy it is to move past the block with normal vertical scrolling.

If the map is the main object on the page, such as on a tour route page, a larger height may be justified. But in that case the area around it needs clear guidance: what the markers show, how to read the order of the points, and which point is the main one. The map should not be a silent oversized block.

Tooltip Behavior on Mobile

Tooltips that look fine on a wide screen can feel cramped on mobile. Check whether the tooltip opens on tap, whether it stays within the visible area, whether it covers the entire marker, and whether it contains too much text. If the tooltip is long, reduce it to the role of the point and move the details into standard text.

For mobile users, short wording matters even more: "Entrance," "Parking," "Registration," "Pickup point." If a point needs more explanation, add a list below the map using the same names and fuller details. That way the user can understand the route even without actively interacting with the map.

An Editorial System for Maps: How to Keep Things Organized After Publishing

A map feels like a small page element when the site has one address. But a few months later, a new entrance appears, parking changes, the office moves, a branch is added, or the event layout changes. Without simple editing rules, the map quickly turns into a pile of outdated markers and stale tooltips. For Themify Maps Pro, it helps to maintain a lightweight editorial system.

What to Record Alongside the Task

You do not need elaborate documentation. A short checklist in the task or an internal note is enough. Record the following:

• Which page contains the map and which Builder layout controls it.
• Which base map address was chosen and why.
• How many markers are on the page and what each marker icon means.
• Which behavior settings are used: draggable, scrollwheel, controls, and zoom.
• Which external constraints matter: Google API key, caching, script optimization, and CDN.
• Who is responsible for validating the map after an address change or site update.

A note like that saves time the next time someone edits the page. A new editor will not have to guess why scrollwheel is disabled, why the parking icon is different, or why the map is centered on the area rather than the first marker.

How to Update Markers Without Chaos

When an address changes or a new point is added, do not edit everything at once. First duplicate the working page or use a draft if your site process allows it. Then change one marker, save, validate the public result, and only then move on to the next one. If the map stops loading after a change, you will know exactly which step came last.

For icon files, keep a small naming system: map-office.png, map-parking.png, map-entrance.png. Do not upload random filenames like pin-final-new-2.png. After a few update cycles, names like that stop meaning anything.

When You Need a Separate Validation Checklist

If the map affects real customer visits, deliveries, event registration, or office arrivals, validation should become a required part of publishing. After every address or marker change, open the page as a visitor, check the mobile version, click the tooltips, and confirm that a text-based address is still visible nearby. If Google Maps is used, also check the browser console for API errors.

That process may sound bureaucratic, but in practice it prevents the most painful mistakes: an outdated entrance, incorrect parking directions, a map that disappeared after optimization, or a tooltip that covers the wrong marker.

Updates, Rollback Checks, and Working on a Live Site

Any add-on that depends on a page builder, theme, external API, and public-page JavaScript should be updated carefully. That does not mean updates are something to fear. On the contrary, WordPress.org recommends keeping plugins current, and Themify publishes separate materials about its updater, recovery after failures, and debug logs. But a working map with an office address or an event route should still be validated after changes, because visitors do not care about the add-on version. They care about the result they see on the page.

What to Check Before Updating

Before updating Themify Builder, the theme, or Maps Pro, capture the current page state. You only need a clear understanding of where the map sits, how many markers it uses, which scrollwheel and draggable settings are chosen, which icons are uploaded, and how the public page looks. If the site uses staging, test there first. If it does not, perform the update during low-traffic hours and have a clear rollback plan at the hosting or backup level.

Be especially careful with pages where the map is tied to paid traffic, appointment booking, an event, or delivery. If the map disappears on a page like that, the problem becomes user-facing immediately, not just technical.

Validation After Updating

After the update, do not stop at the message "Plugin updated." Open the map page as a visitor and check markers, tooltips, scrollwheel, controls, mobile width, and the browser console. If caching is used, clear it before testing and then open the page again in a private window after the test. If the map depends on Google Maps, make sure there are no new API errors or blocked script requests.

If the issue appears immediately after the update, do not modify the map content right away. First record the symptom: the module is missing in Builder, the map does not load, markers disappeared, the tooltip is broken, the style is no longer applied, or mobile behavior got worse. Then determine whether the problem is tied to Builder, the add-on, the theme, cache, or the external API. That order helps prevent you from damaging a working map configuration while trying to solve a problem that lives somewhere else entirely.

When It Makes Sense to Roll Back

Rollback is not needed for every small visual difference. It is appropriate when the map stops performing its actual job. For example, the visitor cannot see the main address, the markers disappear, the public page shows an API error, the map breaks scrolling, or the page becomes noticeably unstable after optimization. If the only issue is an unattractive style, it is usually enough to pick a different one. But if the problem is script loading or a compatibility issue after an update, a temporary rollback may be safer than rushed, chaotic edits.

After a rollback, do not leave the situation undocumented. Record which version or setting caused the problem, what errors appeared in the console, which optimization plugins were active, and what restored the map. Your next update attempt should begin with that note.

Performance, SEO, and Usability: What Matters for a Map Block

A map on a page is not just a visual component. It also means external scripts, network requests, an interactive area, and a potential source of delay. Do not assume the map will automatically improve SEO or visitor behavior. It helps only when it answers a clear user question without getting in the way of page performance.

Do Not Put the Map Above Everything Else Without a Good Reason

If the map sits directly under the page heading and takes up a large amount of vertical space, the visitor may never see the address, phone number, hours, or form right away. In most cases, it is better to provide short text context first, then the map, then any supporting instructions. Search engines and AI systems also understand the page better when the map is accompanied by text explaining the address, landmarks, purpose of the markers, and validation details.

Use Supporting Text Next to the Map

Tooltips are useful for short hints, but important information should also live in normal HTML text. Address, business hours, entrance instructions, parking, public transit, and access warnings are better duplicated next to the map. That makes the information available to users whose map did not load and to people who rely on page search.

Watch the Number of Maps on the Page

Themify's official documentation explicitly warns about Google limits for maps and markers on a page and recommends not adding too many of either. In practice, this is also a usability issue. Several large interactive maps on one page increase load, compete for attention, and make troubleshooting more difficult. If you need to show different regions, consider several separate pages or a specialized directory instead.

Safe CSS Tweaks for the Outer Container

If you need to visually separate the map from nearby content, it is better to use Themify Builder settings or page-level custom CSS, which the Builder documentation describes as a standard capability. Do not edit plugin files. Add a CSS class to the row or container in Builder, for example contact-map-row, and apply a small style through a safe CSS location on the page or in a child theme.

.contact-map-row {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

.contact-map-row .module {
  margin-bottom: 0;
}

The validation is simple: after saving, the map should still work, and the outer container should have clean rounded corners and a subtle shadow. If the style affects adjacent blocks or clips the tooltip, remove the class or remove overflow: hidden. This is a reversible change: it does not alter map data or interfere with JavaScript.

Why the Map Is Not Working and How to Find the Cause

It is best to troubleshoot Themify Maps Pro in layers. If you change every setting at once, it becomes easy to lose the original cause. Start with what the user sees, then move to Builder, then external APIs, cache, and the theme.

Maps Pro Module Is Missing From the Builder Panel

Symptom: the add-on is activated in WordPress, but the editor does not see the module in the add-on modules section. Possible causes: Themify Builder is not active, the wrong ZIP file was installed, the add-on did not activate correctly, the admin area is showing a cached state, or another plugin is conflicting.

What to check: open Plugins - Installed Plugins and confirm that both Builder and Maps Pro are active. Then open another test page and enable Builder there. If the module appears on the new page, the issue is tied to a specific layout. If it does not appear anywhere, review Themify's documentation and reinstall the add-on using the standard method.

The Map Is Visible in the Editor but Empty on the Live Site

Symptom: the map appears in backend preview, but visitors see an empty block, a gray area, or a map error. Possible causes include the API key, billing, domain restrictions, blocked external scripts, cache, or JavaScript optimization. Google's Maps JavaScript API documentation explains that key and billing issues can lead to a dimmed map or console messages.

What to check: open the page in a private window and inspect the browser console. Look for Google Maps JavaScript API messages such as MissingKeyMapError, BillingNotEnabledMapError, ApiNotActivatedMapError, referrer restriction errors, or blocked script requests. If there is no API error, temporarily disable JavaScript optimization on that page and clear the cache.

The Marker Is Not in the Right Place

Symptom: the address is accepted, but the point on the map is offset. Common causes include an ambiguous address, a large building complex, inaccurate input, or a different address format expected by the local mapping service. The fix usually starts with refining the address, adding the city, ZIP code, building name, or using a more specific point if the interface allows it.

When to roll back: if the marker still jumps around after several address revisions, do not keep stuffing the tooltip with extra explanation. Restore a stable main address and explain the entrance, parking, and related details in text next to the map. That gives the user clear guidance even when geocoding has limits.

Mouse Wheel Interferes With Page Scrolling

Symptom: the user scrolls the page, but the cursor lands on the map and changes the zoom instead. This is not a bug. It is a typical conflict between an interactive map and long page content. In Maps Pro settings, check Scrollwheel and disable it on pages where the map is not the main working tool.

Validation: open the page as a visitor and scroll through the map area several times. If the page moves smoothly, the setting worked. If the map still captures scrolling, clear the cache and make sure there is not another map embedded on the page.

Marker Tooltips Cover Important Elements

Symptom: the tooltip opens, but it overlaps a nearby marker, extends beyond the map bounds, or feels too long. Common causes are too much text, a map that is not tall enough, markers placed too closely together, or an unsuitable zoom level. Shorten the tooltip to a brief phrase, increase the map height, or adjust the initial zoom.

Safe fix: keep only the role of the point in the tooltip and move the details into a text block below the map. That improves accessibility and reduces dependence on a popup.

The Map Stopped Loading After Site Optimization

Symptom: the map used to work, but disappeared after enabling minification, script combining, or deferred JavaScript loading. Check your optimization plugin settings and any exceptions for the page with the map. Do not permanently disable all performance enhancements. Start with a targeted exclusion and test the result.

Questions About Maps Pro Setup and Limitations

Can I use Themify Maps Pro without Themify Builder?

Themify's official documentation states that Builder Addons require Themify Builder. They can be used with a Themify theme, where Builder is part of the framework, or with the Builder plugin. If your site does not use Builder, first decide whether adding it for a single map is worth it.

How many markers can I add to one page?

The product page mentions unlimited location markers, but the Maps Pro documentation includes a practical warning about map and marker limits per page. For a real site, it is better to keep the number of points reasonable and avoid turning a normal page into a location directory.

Which should I choose: Road Map, Satellite, Hybrid, or Terrain?

For standard urban contact pages, Road Map is usually the best fit. Satellite or Hybrid are useful when the visitor needs visual landmarks tied to a building, property, or natural area. Terrain makes sense when elevation and topography help explain the place.

Why is the map showing a Google error or a gray area?

If Google Maps is being used, the cause is often related to the API key, billing, domain restrictions, or an inactive Maps JavaScript API. Check the browser console and Google's documentation on error messages. Changing the map style in Maps Pro will not help until the external API loads correctly.

Should I enable scrollwheel?

For a contact page or a long landing page, it is usually safer to disable scrollwheel so the map does not capture page scrolling. For a dedicated route page or a map where the user is expected to explore the area, scrollwheel may be appropriate.

Can I place the map on the homepage?

Themify Builder works with pages and posts, but for the homepage it is important that the front page be set as a static page if you want to edit it with a Builder layout. That is a general Builder rule: the default blog archive is not treated like a normal page for full layout building.

Is this add-on suitable for a large store network?

If you need a map with radius search, filters, categories, bulk location imports, and dedicated store locator logic, it is better to compare specialized plugins. Themify Maps Pro is stronger when used for manual setup of a design-focused map block with a few important points inside a Builder page.

When Themify Maps Pro Is the Right Choice

Themify Maps Pro is a strong fit if your site already lives inside the Themify Builder ecosystem and the map needs to function as part of a page: contacts, a route, several landmarks, a local guide, a case study, or an event landing page. In that scenario, the add-on provides a clear and useful set of settings: map type, style, dimensions, draggable, zoom, controls, base map address, markers, tooltips, and custom icons. That is enough to make the map genuinely useful instead of purely decorative.

Before publishing, run through a short final workflow: confirm Builder is present, add the module to a test page, configure the base map and markers, disable unnecessary behavior, validate the public page while logged out of the admin area, open the browser console, and test the mobile width. If the map needs to become a full location directory, return to the alternatives section and compare specialized solutions.

Once you already understand which points you need, how the map should look, and what checks are required before publishing, you can get the Themify Maps Pro file and test it on a draft page. That approach is safer than editing a live contact page immediately: first validate the module, then the map, then the user scenario.