Have you ever wanted to showcase your WordPress posts on an interactive Google Map? In this guide, I’ll show you how to do just that using Elementor and a few essential plugins. We’ll go through creating custom post types, adding latitude and longitude data, and setting up a dynamic map to display your posts. Whether you’re highlighting travel destinations, local businesses, or favorite spots around the city, this guide will help you create an engaging and informative map for your visitors. Let’s get started!
Before you start, ensure you have the following plugins installed and activated on your WordPress site:
Step 1: Install Required Plugins
- Unlimited Elements (Pro version required for the Google Maps widget)
- CPT UI (Custom Post Type UI – Free version)
- ACF (Advanced Custom Fields – Free version)
Don’t forget to install the Unlimited Google Maps widget inside of Unlimited Elements –> Widgets
Step 2: Create a Custom Post Type
- Navigate to CPT UI in your WordPress dashboard.
- Click Add/Edit Post Types.
- Under Basic Settings, set the following:
- Post Type Slug:
location - Plural Label:
Locations - Singular Label:
Location
- Post Type Slug:
- Click Add Post Type.
Step 3: Create a Custom Taxonomy
- In CPT UI, click Add/Edit Taxonomies.
- Under Basic Settings, set the following:
- Taxonomy Slug:
locationtype - Plural Label:
Location Types - Singular Label:
Location Type
- Taxonomy Slug:
- Assign this taxonomy to the custom post type
Locations. - In Additional Labels, set Hierarchical to
True. - Click Add Taxonomy.
Step 4: Add Custom Fields for Latitude and Longitude
- Navigate to ACF and click Add New under Field Groups.
- Name the field group
Locations. - Click Add Field and create the following fields:
- Field Label: Latitude
- Field Name: latitude
- Field Type: Text
- Add another field:
- Field Label: Longitude
- Field Name: longitude
- Field Type: Text
- Assign these fields to the post type
Locations. - Click Publish.
Step 5: Add New Location Posts
- Go to Locations and click Add New.
- Enter the title and description of the location.
- Add a featured image.
- Fill in the latitude and longitude fields.
- Assign a Location Type (e.g., Nature, Hotel).
- Click Publish.
Repeat this process for all the locations you want to display on the map.
Step 6: Configure the Google Map Widget in Elementor
- Open the page where you want to add the map with Elementor.
- Search for Unlimited Google Maps widget and drag it to your canvas.
- In the Content tab, set the Default Location to your desired area (e.g., Austria).
- Adjust the Zoom Level as needed.
- Under Places, change the Source to
Posts. - In Post Query, set the Post Type to
Locations. - Map the latitude and longitude fields to the corresponding post meta fields (
latitudeandlongitude).
Step 7: Add Filters for Your Map
- In the Post Pagination and Filtering section, enable Post Filtering.
- Add a Tab Filter widget from Unlimited Elements.
- Set the Post Type to
Locationsand the Taxonomy toLocation Types. - Save and preview your map to ensure the filters work correctly.
Conclusion
Your interactive Google Map is now set up to display your WordPress posts dynamically. Users can filter locations and view details directly on the map. If you have any questions or run into issues, feel free to leave a comment for further assistance.
