9Map – Map Multi Locations


Created: 01/2025

Latest updated: 03/2025 – Updated version: 1.0.0

By: VillaTheme

Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

System Requires:

Make sure that those limits are to a minimum as follows for free-trouble while installing:

  • WordPress 6.0 or higher
  • Woocommerce 7.0 or higher 
  • PHP Version 7.0 or higher

 

Install the plugin: 

Go to Dashboard >> Plugins >> Add New Plugins. You have 2 ways to add 9Map:

  1. Upload the zip file 9map-map-multi-locations.zip downloaded from this official source.
  2. Or search the keyword 9Map and install it directly from the list

 

See this instruction for more details.

 

 

A multi-store location plugin is a tool that allows website owners to display multiple store locations on an interactive map. This type of plugin is essential for businesses with multiple branches, franchises, or retail outlets, making it easy for customers to find nearby stores, get directions, and access essential store details.

9Map – Map Multi Locations is a powerful and easy-to-use WordPress plugin designed to help businesses manage and display multiple store locations on a customizable map. It allows users to search, filter, and navigate to stores with advanced features such as geolocation, category filtering, and detailed store information.

With 9Map, you can effortlessly create a store locator page, list all stores, and customize the map and display settings to fit your website’s design and user experience needs.

 

Key Features of 9Map Plugin

Store Management

  • Add and manage multiple store locations.
  • Assign stores to different categories for better organization.
  • Display key store details, including address, contact information, website, email, phone number, and custom fields.
  • Set latitude and longitude for accurate map positioning.
  • Add a store description that appears on the store details page.

 

Store Locator Page and Search Functionality

  • Create a store locator page with a search box to help users find stores easily.
  • Search for stores by name, address, category or distance.
  • Filter search results by category or distance
  • Sort search results by store name (alphabetically) or distance.
  • Auto-detect user location.

 

Store Listing & Details Pages

  • Create a store list page displaying all available stores.
  • Enable pagination for better browsing experience.
  • Show a detailed store page with all store information, including opening hours and contact details.

 

Map Customization and Geolocation

  • Use Google Maps API for accurate mapping and location services.
  • Set up map design with supported built-in style or using a custom map style
  • Adjust the default zoom level and language settings.
  • Customize store markers and user markers.
  • Display a distance radius around the user’s location.

 

Design Customization

  • Choose between full-width or 2-column layouts for store pages.
  • Customize the search results display with options to show store images, titles, addresses, descriptions, and more.
  • Enable store action buttons: View Store, Website, and Get Directions.
  • Adjust popup design settings, including width, image size, and displayed store information.

 

General and Advanced Settings

  • Set the distance unit (kilometers or miles).
  • Enable or disable search fields on the store locator page.
  • Add custom CSS for advanced styling.

 

 

9Map helps you display and manage multiple store locations on your WordPress website using an interactive map. Follow this quick guide to set up and start using the plugin.
Install & Activate the Plugin

  • Go to WordPress Admin > Plugins > Add New.
  • Search for 9Map and click Install Now.
  • Once installed, click Activate.

 

Configure General Settings

  • Add the Store Locator Page with the shortcode: [nimap_store_locator]
  • Add the Store List Page with the shortcode: [nimap_store_search]
  • Add the Store Details Page with the shortcode: [nimap_store_detail]
  • Navigate to 9Map > Settings to set up essential configurations: API Key & Map ID – Get these from Google Cloud to enable maps.
  • Pages Setup: Select the created pages for the Store Locator, Store List, and Store Details using the provided shortcodes.

 

Add and Manage Stores

  • Add a Store: Go to 9Map > Manage Stores > Add New Store
  • Fill in the Store Address (address, city, state, country, zip code).
  • The map will update automatically, or you can manually set coordinates.
  • Enter Store Information (website, email, phone, etc.).
  • Set Opening Hours for each day of the week.
  • Add a Store Description for additional details.
  • View all stores under 9Map > Stores.
  • Edit, delete, or update store details as needed.

 

Categorize Stores

  • Go to 9Map > Store Categories.
  • Click Add New Category, enter a name, and save.
  • Assign categories to stores when adding or editing them.

 

Customize 9Map Pages

Go to 9Map > Settings >> General >> Design >> click “Go to design”

 

 

Manage stores

This section provides an overview of all stores added to the system, allowing for easy management and updates. For details of each individual store, go to Store page back end to view and edit

The store list includes the following details:

  • Store Title: The name of the store.
  • Categories: The assigned store categories for better organization.
  • Published Date: The date the store was added.
  • Address: The store’s location details.
  • Contact Information: Includes phone, email, and other relevant details.
  • Coordinates: Latitude and longitude for precise map placement.
  • Status: Indicates whether the store is Active or Inactive.

 

 

Add new store

This section allows administrators to add and manage store locations by providing essential details such as address, contact information, business hours, and store descriptions. Each store entry is customizable and ensures users can access accurate and organized information.

 

Store address

This section contains essential location details that help display the store correctly on the map. Accept for the first Address field, all other fields can be filled in manually or will update dynamically when you adjust the store’s location via the address field or directly on the map.

  • Address: Enter the store’s street address, then click the “Set Coordinate” button to automatically retrieve the exact location on the map below
  • City: Specify the city where the store is located
  • State: Provide the state or region where the store is based
  • Country: Select the country in which the store operates
  • Zip Code: Enter the postal code of the store’s location
  • Latitude: Input the latitude coordinates for accurate store placement on the map
  • Longitude: Input the longitude coordinates to pinpoint the store’s exact location

Tip: Use the “Keyboard shortcuts” button in the top right corner of the map for quick navigation and controls.

 

Store information

This section includes additional details about the store, making it easier for customers to contact or visit.

  • Website: Enter the store’s official website URL (optional)
  • Email: Provide a contact email for inquiries or customer support
  • Phone: Add the store’s primary contact number
  • Fax: If applicable, enter the store’s fax number
  • Custom field: This optional field allows you to add extra information such as special services, branch codes, or internal notes

 

Store opening hour

Define the business hours for each store to inform customers when they can visit.

  • Each store can have different opening and closing times set for each day of the week.
    Input format: hh:mm:t-hh:mm:t (where t represents AM or PM).
  • Example: 08:00:AM-05:00:PM or 08:00-17:00
  • If a store is closed on a particular day, leave the field empty and it’ll be marked as “Closed”

 

Description

This section allows adding a brief store description that appears on the store’s details page. Some details to include might be a short introduction to the store, its available products/services or special promotion, etc.

 

 

Store categories

Organize stores into categories for better management and easier navigation. Categorizing stores helps users filter and find specific types of stores quickly.

  • Create and assign categories to stores based on their type, services, or location.
  • Categories can be used to filter results on the store locator and store list pages.
  • Managing stores by categories improves search efficiency and enhances the user experience.

 

 

Settings – General

The General settings allow you to configure essential options for the store locator, including API integration, map display, and page assignments.

  1.  API key: To enable Google Maps functionality, you need to set up an API key. A valid one is required for maps to function properly. Go to the Google Cloud Console, create a Maps JavaScript API key, and enter the generated API key here to enable map services.
  2. Map ID: For advanced marker support, a Map ID is required
  3. Locator page: This page displays the store locator map and search box, allowing users to find nearby stores. The selected locator page must include the [nimap_store_locator] shortcode.
  4. Store list page: This is a page listing all available stores with a search box. The selected store list page must include the [nimap_store_search] shortcode.
  5. Detail store page: This page provides detailed information about individual stores. The selected detail store page must include the [nimap_store_detail] shortcode.
  6. Design: Click the Design option and you’ll be redirected to the Design settings, to customize the visual appearance of the store locator, including map styling, layouts, and display settings.

 

 

Settings – Map

Configure how the map loads and displays on Store locator page.

  1.  Load location on page load: Choose how the map determines the starting location:
    • Use user location: Automatically detect and center the map based on the visitor’s current location.
    • Set from selected location: Manually define a starting point for the map.
  2.  Start point: If selecting Set from Selected Location, set the default starting point using:
    • Map Selection: Choose a location directly on the map interface.
    • Latitude & Longitude: Enter specific coordinates.

 

 

Customize the appearance of the store locator, store pages, and map to match your website’s style. This section allows you to adjust visual elements for a better user experience.

Hit the “Go to design” button under General setting tab (option 6 in this documentation) or go to Dashboard >> Appearance >> Customize >> 9Map Map Multi Locator

General

These settings control the overall layout and appearance of the map. On this page:

  • Choose the unit of measurement for distance calculations under “Distance unit”:
    • Kilometer
    • Miles
  • Show search fields: Show/Hide the search fields – Search for location/store, filter by category/distance
  • Custom CSS: Add custom CSS to style the store locator, map, and store lists according to your website’s design.
  • Choose the layout: There’re 2 options

 

FULL WIDTH

 

2 COLUMNS

 

 

Map

  • Load zoom level: Set the default zoom level when the map loads. A lower number shows a wider area, while a higher number zooms in on specific locations
  • Language: Select the language used for map labels and interface elements
  • Map style: Choose from predefined map styles or custom one to match your website’s design
  • Custom map style: If you choose “Custom” in Map style option, paste a properly formatted JavaScript array for a custom map appearance. Use tools like Google Maps Style Wizard or Snazzy Maps to generate styles.
  • Store marker: Choose the icon used to represent store locations on the map. If you want to use custom maker, choose your own image
  • User marker: Set the icon for the user’s current location on the map. If you want to use custom maker, choose your own image
  • Distance radius: Display a circular radius around the user’s location to indicate the search range. If you enable,
    • Inner radius color: Adjust color inside the border – between the border and the market, and the color opacity
    • Border radius color: Adjust color of the border and drag/drop the range slider to change the color opacity

Auto geolocation

When enabled, the map will attempt to detect the user’s location automatically.

  • Confirm text: Customize the message for confirmation
  • Confirm button text: Set the label for the confirmation button

Information popup

When users click on a store marker on the map, a popup appears displaying key store details. These settings allow you to customize the popup’s content and appearance.

  • Display Fields: Select which store information appears in the popup
    • Image
    • Title
    • Address
    • Description
    • Phone number
    • Email
    • Website
    • Open time
    • Category
    • Zip code
    • Custom fields
    • Distance
  • Width (px): Popup size – Set the overall width of the popup.
  • Image width (px): Adjust the size of the store image displayed inside the popup.
  • Buttons: Enable quick action buttons inside the popup for quick user interaction:
    • Store: Open the full store details page.
    • Website: Redirect to the store’s official website.
    • Route: Open directions to the store location map.

 

 

Store result list

Configure how the filtered store results appear on the Store Locator page after a user searches for a location or store.

  • Enable: Display the store results immediately below the search fields when users perform a search
  • Sort by: Choose how the results are ordered:
    • Alphabet: Sort stores by name (A-Z).
    • Distance: Show stores closest to the user first.
  • No result title: Customize the message displayed when no stores match the search criteria. (e.g., “No stores found in this area”)
  • Number result title: Customize the title text showing the total number of results found
  • Enable paging: Separate the store result list into multiple pages for easier navigation
  • Max result per page: Set the number of stores displayed per page before pagination is applied
  • Store display fields: Choose which information is shown in the search results list
    • Image
    • Title
    • Address
    • Description
    • Website
    • Phone Number
    • Email
    • Open time
    • Category
    • Zip code
    • Custom fields
  • Buttons: Enable quick action buttons to allow users to interact with store results
    • Store: View the full store details page.
    • Website: Open the store’s website.
    • Route: Get directions to the store location map

 

 

Search and filter

Configure search and filtering options to help users easily find stores on the Store Locator page.

  • Search location:
    • Enable: Show or hide the Search for Address block.
    • Search location label: Customize the button label for the location search field
    • Layout: Choose the layout
      • Full width: Search input field and search button are on the same line. With this, search button label is just a search icon
      • 2 Column: Search input field and search button are separated in 2 rows. Search button label now is the label defined in Search location label
  • Search stores
    • Enable: Enable or disable the store search field.
    • Search store label: Customize the button label for the store search field
    • Layout: Choose the layout
      • Full width: Search input field and search button are on the same line. With this, search button label is just a search icon
      • 2 Column: Search input field and search button are separated in 2 rows. Search button label now is the label defined in Search store label
    • Field to search: Select which store details can be searched
      • Title
      • Address
      • Description
      • Phone Number
      • Email
      • Website
      • Zip Code
      • Custom Fields
  • Filter:
    • Enable distance: Allow users to filter stores by how far it is to their location
    • Distance label: Customize the placeholder for the distance filter
    • Enable category: Allow users to filter stores by category.
    • Category label: Customize the placeholder for the category filter
    • Sort result by: Choose how search results are sorted
      • Distance
      • Title

 

 

Search page

Customize the layout and display of the Store list page, which presents all available stores and a search function for users to find locations easily.

  • Layout: Choose how stores are displayed on the page:
    • Full width: Stores are listed in a single-column, full-width layout.
    • 2 Column: Stores are displayed in two columns – one for the search fields on the left, the other for the store list on the right
  • Store display fields: Select which details to show for each store in the list
    • Image
    • Title
    • Address
    • Description
    • Phone Number
    • Email
    • Website
    • Open Time
    • Category
    • Zip Code
    • Custom Fields
  • Store buttons: Enable action buttons for quick user interaction
    • Route: Provides a direct navigation link to the map.
    • Website: Links to the store’s website.
    • Store: Opens the store’s detail page.
  • Search result column: Define how search results are structured within the page layout.
  • Enable paging: Paginate the search result to improve usability when listing a large number of stores
  • Max result per page: Set the maximum number of stores displayed per page before pagination is triggered

 

 

Store page

By default, a store page has “Map view” section that shows the map based on the defined location. Customize the layout and other information displayed on the Store Details Page, where users can view complete store information.

  • Layout: Choose how the store details are presented
    • Full Width – Displays store details in a single-column layout.
    • 2 Columns – Splits store information into two sections for a more structured view.
  • Display fields: Select which details to show on the store details page. All are specified under store detail page back end.
    • Image
    • Title
    • Address
    • Description
    • Phone Number
    • Email
    • Website
    • Open Time
    • Category
    • Zip Code
    • Custom Fields
  • Buttons: Enable quick action buttons
    • Route: Provides navigation directions to the store map.
    • Website: Links to the store’s official website.
    • Store: Directs users to the store’s map

 

 

Extra Information


Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.