Download Plugin

Map Block

Written by

in

Overview

The Map Block integrates Google Maps directly into your WordPress pages, allowing you to display locations, business addresses, custom markers, and interactive maps. Perfect for contact pages, store locators, event locations, and location-based content.

Key Features

  • Google Maps Integration: Powered by Google Maps API
  • Address Search: Enter address and automatically geocode to coordinates
  • Custom Markers: Add custom map markers and info windows
  • Map Styles: Standard, satellite, terrain, or custom styles
  • Zoom Controls: Set initial zoom level and controls visibility
  • Responsive: Automatically adjusts to container width
  • Height Control: Customizable map height

How to Use

  1. Add the Map block to your page
  2. Enter an address or coordinates in settings
  3. Adjust zoom level (1-20)
  4. Choose map style
  5. Set map height
  6. Configure controls
  7. Preview and publish

Google Maps API Setup

To use the Map block, you need a Google Maps API key:

  1. Go to Google Cloud Console
  2. Create a new project
  3. Enable Maps JavaScript API
  4. Create API credentials
  5. Add API key in WordPress Admin > DesignSetGo > Settings

Common Use Cases

  • Contact Pages: Show business location
  • Store Locators: Display retail locations
  • Event Venues: Show event locations
  • Real Estate: Property locations
  • Directions: Help visitors find your location

Best Practices

  • Set appropriate zoom level (14-16 for street level)
  • Use descriptive marker titles
  • Choose map height appropriate for content (400-600px)
  • Enable zoom/pan controls for better UX
  • Provide address text for accessibility
  • Restrict API key to your domain for security

Troubleshooting

  • Map not displaying: Verify API key is valid
  • Wrong location: Check address spelling, try coordinates
  • Map too small: Increase height setting
  • Controls not showing: Enable control settings

More posts