fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

custom-cursor-elementor
google-maps-widget
age-verification-widget-for-elementor

How to Display a List of Posts on a Map using Elementor?

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

  1. Unlimited Elements (Pro version required for the Google Maps widget)
  2. CPT UI (Custom Post Type UI – Free version)
  3. 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

  1. Navigate to CPT UI in your WordPress dashboard.
  2. Click Add/Edit Post Types.
  3. Under Basic Settings, set the following:
    • Post Type Slug: location
    • Plural Label: Locations
    • Singular Label: Location
  4. Click Add Post Type.

Step 3: Create a Custom Taxonomy

  1. In CPT UI, click Add/Edit Taxonomies.
  2. Under Basic Settings, set the following:
    • Taxonomy Slug: locationtype
    • Plural Label: Location Types
    • Singular Label: Location Type
  3. Assign this taxonomy to the custom post type Locations.
  4. In Additional Labels, set Hierarchical to True.
  5. Click Add Taxonomy.

Step 4: Add Custom Fields for Latitude and Longitude

  1. Navigate to ACF and click Add New under Field Groups.
  2. Name the field group Locations.
  3. Click Add Field and create the following fields:
    • Field Label: Latitude
    • Field Name: latitude
    • Field Type: Text
  4. Add another field:
    • Field Label: Longitude
    • Field Name: longitude
    • Field Type: Text
  5. Assign these fields to the post type Locations.
  6. Click Publish.

Step 5: Add New Location Posts

  1. Go to Locations and click Add New.
  2. Enter the title and description of the location.
  3. Add a featured image.
  4. Fill in the latitude and longitude fields.
  5. Assign a Location Type (e.g., Nature, Hotel).
  6. 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

  1. Open the page where you want to add the map with Elementor.
  2. Search for Unlimited Google Maps widget and drag it to your canvas.
  3. In the Content tab, set the Default Location to your desired area (e.g., Austria).
  4. Adjust the Zoom Level as needed.
  5. Under Places, change the Source to Posts.
  6. In Post Query, set the Post Type to Locations.
  7. Map the latitude and longitude fields to the corresponding post meta fields (latitude and longitude).

Step 7: Add Filters for Your Map

  1. In the Post Pagination and Filtering section, enable Post Filtering.
  2. Add a Tab Filter widget from Unlimited Elements.
  3. Set the Post Type to Locations and the Taxonomy to Location Types.
  4. 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.

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!