woosmap

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


Store Locator Widget Block

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

10up

Jeffrey Paul

Helen Hou-Sandi

Ryan Welcher

Tung Du

Fabian Kaegy

<p><strong>Disclaimer:</strong> <em>Apple Maps, MapKit JS, and the Apple logo are trademarks of Apple Inc.  Apple Maps may not be available in all countries or regions.</em></p>
<p>This plugin integrates Apple’s <a href="https://developer.apple.com/maps/mapkitjs/" rel="nofollow ugc">MapKit JS</a> into an “Apple Maps” block in the WordPress block editor (Gutenberg).  You will need an <a href="https://developer.apple.com/programs/" rel="nofollow ugc">Apple Developer Program</a> account, Maps Identifier, and Private Key to configure this plugin and connect to the MapKit JS API in order for the block to function.  Note that the Apple Developer Program has an annual fee of 99 USD, in local currency where available.  Prices may vary by region and are listed in local currency during the enrollment process.  <a href="https://developer.apple.com/support/membership-fee-waiver/" rel="nofollow ugc">Fee waivers are available for the Apple Developer Program for eligible organizations</a>.</p>
<h3>Configuration</h3>
<p>In order to start using the Apple Maps block, you will need to sign up for the Apple Developer Program and create your Maps identifiers, keys, and tokens.  Follow the steps below to generate the Private Key, Key ID, and Team ID that you will need to configure the plugin and gain access to the MapKit JS API for the Apple Maps block.</p>
<h3>Create an Apple Developer account</h3>
<ol>
<li>If you don’t already have an Apple ID, then please <a href="https://appleid.apple.com/account#!&page=create" rel="nofollow ugc">create an Apple ID</a> as it is required in order to enroll in the Apple Developer Program in the next step.</li>
<li><a href="https://developer.apple.com/programs/enroll/" rel="nofollow ugc">Enroll in the Apple Developer Program as either an individual or organization</a>.  Note that its possible to have an existing Apple Developer account but not be enrolled in the Apple Developer Program, so please be sure to complete the enrollment process in this step.</li>
<li>Sign the Apple Developer Program License Agreement in the <a href="https://appstoreconnect.apple.com/WebObjects/iTunesConnect.woa/da/jumpTo?page=contracts" rel="nofollow ugc">Agreements, Tax, and Banking section of App Store Connect</a>.</li>
</ol>
<h3>Create a Maps Identifier and Private Key</h3>
<ol>
<li><a href="https://developer.apple.com/documentation/mapkitjs/creating_a_maps_identifier_and_a_private_key" rel="nofollow ugc">Create a Maps ID and a MapKit JS Private Key</a>.</li>
<li>Copy the Private Key, paste it into the respective plugin setup field, and ensure the key includes the <code>-----BEGIN PRIVATE KEY-----</code> and <code>-----END PRIVATE KEY-----</code> lines.</li>
<li>Open the Key you created in Step 1, copy the <code>Key ID</code> value, and paste it into the respective plugin setup field.</li>
<li>Open the Identifier you created in Step 1, copy the <code>App ID Prefix</code> value (notice the value is appended with <code>(Team ID)</code>), and paste it into the respective plugin setup field.</li>
<li>Click the <code>Confirm MapKit Credentials</code> button in the plugin setup to gain access to the block options and begin customizing your Apple Maps block!</li>
</ol>


Block for Apple Maps

An Apple Maps block for the WordPress block editor (Gutenberg).

Store Locator Widget Block vs Block for Apple Maps