woosmap

The Woosmap Store Locator Widget Block for WordPress allows you to add a store locator to your WordPress site using the 
Gutenberg editor. This plugin leverages 
the <a href="https://developers.woosmap.com/products/widgets/store-locator-widget/quick-start/" rel="nofollow ugc">Woosmap Store Locator Widget JS</a> 
to provide a rich and interactive experience for users looking for your store locations. 
With easy customization and setup, you can enhance your site’s user experience in minutes.
To use this plugin, you will need a Woosmap account and an API key. The Woosmap Store Locator Widget connects to the 
Woosmap API to fetch and display store locations on your site. Note that Woosmap offers various pricing plans, including 
a free tier with limited usage and paid plans for higher usage and additional features. For detailed pricing 
information, please refer to the <a href="https://www.woosmap.com/pricing/" rel="nofollow ugc">Woosmap pricing page</a>.
The widget supports a broad array of languages, including French, English, Spanish, German, and many more, catering to a 
global audience and is designed for fast and advanced display capabilities, ensuring a seamless user experience.
<a href="https://developers.woosmap.com/products/widgets/store-locator-widget/quick-start/" rel="nofollow ugc">Check official documentation</a> for 
more details.
<h3>Key Features</h3>
<ul>
<li>Multilingual Support: Available in over 15 languages, such as English, Chinese, and French, catering to 
international brands.</li>
<li>Customizable Display: Users can set a primary color that applies to labels and backgrounds, aligning the 
locator’s 
appearance with their brand identity.</li>
<li>Flexible Search: Adapt the search features to include autocomplete worldwide or for specific countries and 
specific types (address, postal code, etc.), ensuring the functionality best fits your needs.</li>
<li>Advanced Display Options: Offers simplified and markers views for displaying assets, allowing for a clean view or 
detailed markers based on zoom level.</li>
<li>Configurable Search Parameters: Set the number of assets fetched from a user search and bound searches within a 
set radius to accommodate store density.</li>
</ul>
<h3>Display Customization</h3>
<ul>
<li>Simplified View: Ideal for rendering a large number of assets or high store density, displaying assets as colored 
dots for faster map loading and a cleaner view.</li>
<li>Markers View: Displays assets as pictograms with customizable images, sizes, and hotspots, suitable for detailed 
branding after a specified zoom level.</li>
</ul>
<h3>Integration and Customization</h3>
The widget’s properties offer versatile customization options: use Form controls for swift adjustments of attributes 
like theme color, or dive into an editable JSON Configuration for granular control over the store locator’s 
functionality and appearance. This adaptability guarantees seamless integration into any website, equipping businesses 
with a robust tool to enhance their online presence and engage customers more effectively.
<h3>External Dependencies</h3>
This plugin will load the Woosmap Store Locator Widget JavaScript asynchronously, which will then load the 
<a href="https://developers.woosmap.com/products/map-api/get-started/" rel="nofollow ugc">Woosmap Map JavaScript</a> asynchronously and execute 
requests to Woosmap services for various functionalities:
<ul>
<li>Searching for Stores: The widget will query the Woosmap API to fetch store locations, ensuring accurate and 
up-to-date results.</li>
<li>Autocompleting Addresses: The widget will use Woosmap’s autocomplete service to suggest addresses as users type, 
enhancing the user experience with quick and relevant suggestions.</li>
<li>Displaying Maps: The widget will render maps using Woosmap’s mapping service to visually display store locations 
and other relevant data, providing an interactive and user-friendly interface.</li>
</ul>
The URLs involved are: 
– <a href="https://webapp.woosmap.com/webapp.js" rel="nofollow ugc">https://webapp.woosmap.com/webapp.js</a> 
– <a href="https://sdk.woosmap.com/map.js" rel="nofollow ugc">https://sdk.woosmap.com/map.js</a> 
– <a href="https://api.woosmap.com/*" rel="nofollow ugc">https://api.woosmap.com/*</a>
<h3>Source Code</h3>
This plugin’s source code is accessible in the <code>src</code> directory of our <a href="https://github.com/woosmap/store-locator-widget-block" rel="nofollow ugc">GitHub repository</a>.
<h3>Configuration</h3>
To begin using the Woosmap Store Locator Widget Block, follow these steps to configure your environment and gain access 
to the Woosmap API 
for enhancing your site with location services.
<h3>Woosmap Account Requirements</h3>
<ol>
<li>If you haven’t already, <a href="https://www.woosmap.com/sign_up/" rel="nofollow ugc">sign up for a Woosmap account</a> as it’s necessary to access 
the Woosmap Console and API keys.</li>
<li><a href="https://console.woosmap.com/" rel="nofollow ugc">Log in to the Woosmap Console</a>. If you’re new to Woosmap, you might need to 
create a project to generate API keys.</li>
<li>Navigate to the API keys section and generate a new Public API key for your project. This key will be used to 
authenticate your requests to the Woosmap services.</li>
</ol>
<h3>Configure the Woosmap Store Locator Widget Block</h3>
When you create a new Woosmap block, the initial settings screen prompts you to enter the public API Key. If an API Key 
has already been configured, this field will be pre-populated with the existing key stored in the Woosmap settings. 
After validation, proceed to the Map View to access various editor settings, or edit the JSON Configuration as desired.

Store Locator Widget Block

Easily integrate the Woosmap Store Locator Widget into your WordPress site with this Gutenberg block plugin.

Tushar Imran

Academy LMS

Important Announcement: The WP Map Block plugin has officially merged with <a href="https://wordpress.org/plugins/ablocks" rel="ugc">aBlocks</a>. It’s an innovative and comprehensive Gutenberg blocks builder for WordPress. Now, you can enjoy enhanced mapping options alongside a wide range of customizable blocks. All within a single, powerful plugin aBlocks. <a href="https://academylms.net/how-to-use-wp-map-block/" rel="nofollow ugc">Here’s how to Migrate WP Map Block to aBlocks!</a>
<h3>Why Switch to aBlocks?</h3>
As a valued WP Map Block user, you’ll benefit from this upgrade in several ways:
Enhanced Mapping Features: Experience all the functionalities you loved in WP Map Block. The interactive maps with Google Maps and OpenStreetMap are now integrated into the powerful aBlocks framework. 
More Customization Options: With aBlocks, you have the access to an extensive library of blocks that allow you to create stunning layouts and designs beyond just maps. You can create a complete website with advanced customization options. 
User-Friendly Interface: The intuitive Gutenberg editor in aBlocks makes it easier than ever to add and customize maps and other blocks without any coding knowledge. 
Responsive Design: Ensure your maps and content look great on any device with built-in responsive settings.
Key Features of aBlocks:
Customizable Blocks: Explore various blocks designed for different content types, including container, headings, text & color customization and even more. 
Interactive Maps: Easily embed Google Maps or OpenStreetMap with customizable options and animations that enhance user engagement. 
Performance Optimized: Enjoy fast load times and smooth operation with aBlocks lightweight design.
<h3>Transferring from WP Map Block to aBlocks</h3>
If you were using WP Map Block, you can transfer to aBlocks uninterrupted. Simply install the aBlocks plugin from the WordPress directory. You’ll see a button “Convert to Map Block” in the section where you used the WP Map Block. Simply click it and all your existing map configurations will be automatically transferred. You’ll retain your map settings while gaining access to new and advanced customization options.
You can use the map block the same way you’ve used it before for Google Maps and OpenStreetMap.
The new Map Block offers a simple user interface that allows you to add Google Maps and OpenStreetMap to your WordPress site. This plugin is built with LeafletJS, an open-source JavaScript library for mobile-friendly interactive maps. This straightforward Map option for your website with advanced settings of aBlocks.
It is the ideal solution for you if you’re using the Gutenberg editor and require a map on your site. Using aBlocks, you can easily customize Google Maps or OpenStreetMap for Gutenberg-supported posts, pages, or custom post types for your WordPress site.
Most Convenient Way to utilize Gutenberg Map block for Google Maps & OpenStreet Maps.
WP Map Block offers a simple user interface that allows you to add Google Maps to your WordPress site. This amazing plugin is built with <a href="https://leafletjs.com/" rel="nofollow ugc">LeafletJS</a>, an open-source JavaScript library for mobile-friendly interactive maps. There are no fluff and redundant settings and a straightforward Map option for your Gutenberg block.
WP Map Block is the ideal solution for you if you’re using the Gutenberg editor and require a map on your site. Using this plugin, you can easily customize Google Maps or OpenStreetMap for Gutenberg-supported posts, pages, or custom post types for your WordPress site.
⭐ <a href="https://academylms.net/wp-map-block/" rel="nofollow ugc">Live Demo</a> 
⭐ <a href="https://academylms.net/how-to-use-wp-map-block/" rel="nofollow ugc">Docs</a>
<h4>Plugin Features ✅</h4>
<ul>
<li>Google Maps</li>
<li>OpenStreet Maps</li>
<li>Multiple Marker</li>
<li>Zoom Control</li>
<li>Full Screen Map Control</li>
<li>Custom Marker Icon & Popup</li>
<li>Map Width & Height</li>
<li>Latitude and Longitude Generator from address</li>
<li>Set any marker as center position</li>
<li>Marker Builder</li>
<li>Draggable Marker</li>
<li>Don’t need any API key</li>
</ul>
🗺️Google Map: Set the default Google Map on any page or post of your WordPress site. With a single click, you can select this map anywhere on your site using WP Map Block.
🛣️OpenStreet Maps: We’ve included this option for you so you can enable OpenStreet Maps and tweak it within your site. OpenStreet Map is an open-source map where you can contribute to improving the quality of data on the map. Every update you make to Open Street Map is owned by both you and the community as a whole.
📌Multiple Marker: By default, a marker will appear on the map based on your location. But you can add additional markers on your map by customizing the settings. Also, set the title and content for the marker as well as set the default position of the marker.
🔎 Zoom Control: Zoom in and out of the map with ease using the zoom option. The map works quickly since it is built using LeafletJS, and it does not take long to load the map after zooming in or out.
📲Full-Screen Map Control: Get a full-screen map view while using the map presented by this plugin. You can control the map very comfortably within the full screen and navigate the whole map freely.
🛠️ Custom Marker Icon & Popup: Explore the settings and customize the marker on your map. You can place custom markers on the map and also place your preferred popups on the map.
🎚️Map Width & Height: You can set your preferred width and height on the map by customizing it from the settings. This option allows you to set the displayed map at a certain height and width and then place it on the front end of your site. You can set it according to your viewing preference.
☸️ Latitude and Longitude Generator: You can generate addresses from the latitude and longitude of your location. With the help of latitude and longitude, you will get a precise location and address on the map.
📍Set any marker as the center position: You can set the marker in the central position on the map. If you have placed a custom marker on the map, you can set it as your default marker and set its position in the middle. This will show the marker as the main marker; it will be displayed at the center of the map.
☄️Marker Builder: You may be bored to see the same old marker icon on the map. WP Map Block allows you to customize the map beyond the traditional elements of the map. You can customize as well as build a new marker and place it on the map.
👋 Draggable Marker: Drag the marker in any position on the map and reveal the location swiftly. The dragging option is really smooth, and after dragging the marker, the location gets revealed instantly.
🔑 API key not required: To place the map on your site. Simply select the map block and place it on any page of your site. The vast majority of Google Map plugins now available on the market need the use of API keys in order to activate the map; however, our plugin does not.
<h3>🔥 WHAT’S NEXT</h3>
If you like WP-Map-Block, then consider checking out our other WordPress Plugins for FREE:
🔝 <a href="https://academylms.net" rel="nofollow ugc">Academy LMS</a> – Academy LMS is a modern, lightweight LMS plugin for WordPress. It helps users create and sell online courses, manage instructors, track student progress, quizzes, and more — all inside WordPress. 
🔝 <a href="https://ablocks.pro" rel="nofollow ugc">aBlocks</a> – aBlocks is a powerful Gutenberg-based WordPress website builder and a clean alternative to Elementor. It provides custom blocks and design flexibility while keeping your website fast and bloat-free. 
🔝 <a href="https://storeengine.pro" rel="nofollow ugc">StoreEngine</a> – StoreEngine is an all-in-one, next-gen eCommerce plugin for WordPress. It’s designed to make selling digital products, courses, memberships, and even physical goods easier than ever.
<h3>💙 Join the aBlocks Community</h3>
Don’t miss out on the opportunity to elevate your WordPress site with aBlocks. Experience enhanced mapping capabilities along with a suite of powerful design tools. Install aBlocks today and unlock the full potential of your website!
<ul>
<li>Like on our <a href="https://ablocks.pro/" rel="nofollow ugc">aBlocks Website</a></li>
<li>Join our <a href="https://www.facebook.com/profile.php?id=61560040810557" rel="nofollow ugc">aBlocks Facebook Page</a></li>
<li>Join our <a href="https://www.facebook.com/groups/386840187678401/" rel="nofollow ugc">aBlocks Community Group</a></li>
</ul>

WP Map Block – Gutenberg Map Block for Google Map and OpenStreet Map by aBlocks

No API key is required to launch Google Maps & OpenStreetMap.

Store Locator Widget Block vs WP Map Block – Gutenberg Map Block for Google Map and OpenStreet Map by aBlocks