Locations & Areas – Leaflet Map with Region Tabs


Showcase your multiple locations on a single map tabbed with areas. The map is based on Leaflet JS and offers you several free map styles. So you do not need an API Key, Access Token or any other external registration. There are no API request limits. Just put in your locations with coordinates and place the shortcode anywhere on your site.

You can also provide Areas (Regions) to offer different focus points to your visitor.

For example: You have offices in Europe, Asia and North America and don‘t want to include a whole world map or three separate maps for that. This plugin let‘s you set multiple focus areas within one map. Your visitors will switch (literally ”fly”) between your focus areas just by clicking the links on top of the map.

Another example: You have several stores in different cities. Your site visitors will be able to ”fly” between the cities to get an overview of the exact locations inside every city. You can set the zoom level for every area individually.


  • Let your visitors "fly" between multiple Areas to showcase your Locations on a single map.
  • Use another map style
  • ...or maybe try this one?
  • New layout option: Vertical Areas navigation
  • Edit Screen for Locations
  • Edit Screen for Areas
  • Settings Screen
  • Integrate the map with Gutenberg Block Editor.


This plugin provides 1 block.

  • Locations & Areas - Leaflet Map with Region Tabs


From your WordPress dashboard

  1. Visit Plugins > Add New
  2. Search for “Locations & Areas”
  3. Install and activate Locations & Areas from your Plugins page
  4. Click on the new menu item “Locations” and create your first Location!
  5. Use the Gutenberg Block “Locations & Areas Map” (category “Widgets”) or just use the shortcode [locations-and-areas-map] to show the map on your site.


Do I need an API Key or some external registration?

No, the plugin is based on Leaflet.js and offers you free map styles that don’t need any kind of registration.

How to integrate the map?

Use the Gutenberg Block “Locations & Areas Map” or just place the shortcode [locations-and-areas-map] anywhere in your content or integrate it within your theme template with PHP:

echo do_shortcode("[locations-and-areas-map]")

Can I use Gutenberg?

Yes! You will find the “Locations & Areas Map”-Block under widgets.

Can I use vertical navigation for areas?

Yes, go to plugin settings and choose from different layouts.

Can I use custom styles?

Yes, we encourage you to do so. This plugin is supposed to be developer friendly. Feel free to override the .locations-and-areas class in css to create your own awesome design.

I want to submit a feature request.

Please do so! You can use the support forum to let us know about your ideas helping to make this plugin better.


اکتوبر 26, 2020
I'm ussing this plugin instead "WP Store Locutor" because the google api restrictions with the payment method, this plugin is using openstreet maps. Is very simple to use, just put latitude and longitude data from your location to make the marker point on the map and that it's all.
ستمبر 29, 2020
It does what is says without issues. Wish there would be an option for vertical tab display. Sometimes the tabs don't fit, especially when there are too many locations to display.
اگست 28, 2020
Yeah, I was hoping someday there would be a plugin, where I can showcase our 20+ office locations worldwide - within one single map. Makes total sense and the plugin does exactly that! Great work!
Read all 3 reviews

Contributors & Developers

“Locations & Areas – Leaflet Map with Region Tabs” is open source software. The following people have contributed to this plugin.


“Locations & Areas – Leaflet Map with Region Tabs” has been translated into 7 locales. Thank you to the translators for their contributions.

Translate “Locations & Areas – Leaflet Map with Region Tabs” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.



  • WordPress 5.8 compatibility
  • Add default map style
  • FEATURE: unlock three additional map styles hint
  • wording


  • FEATURE: Give us a little feedback and unlock three new map styles.
  • FEATURE: Preview map styles on settings page.
  • fixing translation bug with Gutenberg Block
  • code optimization


  • FEATURE: use the new Gutenberg Block to include the map
  • code optimization


  • ensure PHP 5.6 compatibility


  • wording correction


  • FEATURE: vertical areas navigation is now available (new setting “Layout”)
  • fully switching to public translation from translate.wordpress.org
  • code optimization


  • prevent map zoom by scrolling the page
  • code optimization
  • ensure compatibility for current WordPress version


  • BUGFIX: map not loading when using inline js caching 3rd party caching plugins
  • BUGFIX: missing coordinates for areas


  • changes in readme, title, icon, description


  • changes in readme and description


  • manage locations as CPT
  • manage areas as taxonomy
  • choose map style
  • areas are optional
  • provide shortcode