WordPress Unyson插件添加Google地图高度为0的问题排查求助

Hey there! I’ve run into this exact issue a few times with Unyson’s map module—let’s break down the most common causes and fixes to get your map showing properly:

1. Missing Explicit Height in CSS or Module Settings #

Unyson’s Google Map module often doesn’t set a default height out of the box, or your theme’s reset styles might be stripping it away. Here’s how to fix it:

• First, check the map module’s settings in the page builder—look for a "Height" field (it might be tucked under "Advanced" or "Styling"). If it exists, set a value like 400px and save your changes.
• If no height setting is available, add custom CSS targeting the map container. Open your theme’s customizer (Appearance > Customize > Additional CSS) and paste this (adjust the class if your container uses a different one—use browser dev tools to inspect the map element):

  .fw-map-container {
      height: 400px !important;
      min-height: 400px;
  }
  

  The !important ensures it overrides any conflicting theme styles that might be collapsing the container.

2. Google Maps API Configuration Issues #

If the API isn’t loaded correctly, the map won’t initialize at all, leaving the container stuck at zero height:

• Head to Unyson > Settings > Google Maps and double-check your API key is entered correctly. A critical step: make sure you’ve enabled the Maps JavaScript API in your Google Cloud Console (this is a super common oversight!).
• Open your browser’s developer console (F12 > Console tab) and look for errors like Google Maps JavaScript API error: InvalidKeyMapError or ApiNotActivatedMapError. Follow the error messages to fix key permissions or activate the required API.

3. Theme/Plugin Conflict #

Sometimes other themes or plugins interfere with map rendering:

• Temporarily switch to a default WordPress theme (like Twenty Twenty-Four) and refresh the page. If the map shows up, your theme’s CSS is the culprit—you’ll need to adjust its styles to not collapse the map container.
• Disable all other plugins one by one, reloading the page each time. When the map starts working, the last plugin you disabled is the conflicting one. You can then check its settings or reach out to the plugin developer for a compatibility fix.

4. Collapsing Parent Container #

If the map’s parent element doesn’t have a defined height or uses a layout that collapses child elements (like flexbox without proper sizing), the map will inherit zero height:

• Use browser dev tools to inspect the parent element of the map container. Check if it has height: auto or is part of a flex/grid layout without explicit sizing rules.
• Fix it by adding height: 100% to the parent (if it’s inside a section with a set height) or flex: 1 if it’s in a flex container to let it take available space.

Hope one of these fixes gets your map displaying correctly!

内容的提问来源于stack exchange，提问作者Denis Ipatov