Login

Extra markup breaking map markup

Google Maps display issue · UberMenu

WordPress, your theme, or another plugin may be running autop or textualize filters on the map HTML, which adds extra BR elements and breaks the map output. Upgrade to the latest version of UberMenu (2.2.1.0 or later) to resolve the issue.

Details

Not applicable to UberMenu 3

Background

WordPress has filters that can act upon HTML markup for the purpose of enhancing user-entered content. Unfortunately, these filters are not very smart, so sometimes they cause trouble.

The Problem

UberMenu adds line breaks to the Map markup to make it more readable. On a standard WordPress installation, this is not an issue. However, there are two cases where a WordPress textualize filter is applied to the markup and adds extra BR elements where they do not belong:

  1. Themes or plugins add filters to text widgets
  2. “Automatically Add Paragraphs” is checked on the Text Widget containing the maps shortcode

As a result, the extra markup creates invalid HTML, and the map does not render properly.

Identifying the issue

Check your HTML output (search for “spark-map-canvas” in your page source). If you see extra BR elements within the spark-map-canvas div tag, this is the issue.

The Solution

Upgrade to the latest version of UberMenu. I’ve removed the line breaks in UberMenu 2.2.1.0 to avoid the problem altogether, so this should no longer be an issue.