WordPress - WooCommerce Maps Store Locator.

Is an extremely advanced mapping system that makes it easy for your customers/visitors to find your store, location real estate – buy, sell or rent a Home, Restaurant, Events... on Google Maps. Give your potential customers more information by showing that your items for buy, sell or for rent everywhere and even near their location. Easy to show your single products which is availalbe in shops markded, create multiple markers, easy to custom marker icon, infowindow, filters, and more.

 
Features:

Map of our stores



Single Product on Map





DT WooMap Settings


- Go to your WordPress admin panel and navigate to Plugins -> Add New.

- Click “Upload” and then Upload.

- Select the archive “WooCommerce Maps Store Locator.zip” and click “Install Now”.

- Activate the DT WooMap plugin by clicking “Activate” button.

Go to Settings / DT WooMap Settings then setting the global options to using for shortcode.
Basic Options
Option Description
Google Maps API Key (Required) Enter your API Key.
Map type Select the map type.
Show Filter Show filter by category.
Width Enter the width of map in pixel.
Height Enter the height of map in pixel.
Main Color Set main color for info windows.
Directions Get Directions title. Leave blank to disable this feature.
View More View More title.

Advanced Options
Option Description
Custom CSS Custom Css template.

The Google Maps Platform requires the usage of API keys and an active billing account.

Browser API Key

The browser API key is used when data is requested from the Google Maps JavaScript API. This happens when the map is loaded in the admin area or on the store locator page itself on the front-end.

Create Browser Key

The first screen you will see in the Google API Console allows you to choose between creating a new project, or using an existing one. Click ‘Continue’ after you have made a selection.





The next screen allows you set to a name for the browser key and restrict the usage of the browser key to the provided referrers. If you leave the referrer field empty, it’s possible for other users to use your key on their domains. Set the referrer to http(s)://domain.com/* to cover all pages on your site, or *.domain.com/* if you’re using a subdomain.





Make sure to enable the following Google Maps APIs on the APIs & Service > Library > Maps (View All). Then go to the API key > Select API restrictions and select the APIs can be called with this key.

  • Maps JavaScript API
  • Places API
  • Geocoding API
  • Maps Static API




Google Maps Billing

As of July 16, 2018, to continue the use of the Google Maps Platform APIs, you must enable billing on each of your projects.

If you do not have billing accounts, Google will ask you to create it. So, fill all the fields. In order you have it, jump to the next step.
Note, according to a Google policy, you will automatically charged only when you reach your billing threshold or 30 days after your last automatic payment, whichever comes first. Firstly, Google gets a 12-month free trial period and $300 credits.





1. Using with Custom Post Type

Create Maps

Go to DT - Map Marker then create the marker.



Using the Shortcode

Simply type in your post/page the following shortcode.

Use the shortcode and get the settings global :
Go to Settings / DT WooMap settings then setting the global options to use for the shortcode.

data_cat_ids is a property, a comma separated list (no spaces) of category IDs to include that limits the results to the specified categories.
Example: data_cat_ids='61,62'

Simply paste to your post/page.





2. Using with Woocommerce

Create Maps

Go to Producs / Maps then add your maps here.



Then go to product and select stores to apply single product which is available in stores marked on Google maps.

Using the shortcode to display single product on Map.


Using the Shortcode

Simply type in your post/page the following shortcode.

Use the shortcode and get the settings global :
Go to Settings / DT WooMap settings then setting the global options to use for the shortcode.

data_cat_ids is a property, a comma separated list (no spaces) of category IDs to include that limits the results to the specified categories.
Example: data_cat_ids='61,62'

Simply paste to your post/page.

The shortcodes have following parameters:

If added, the parameter will be overwrite the setting option.

  • maptype : "roadmap", "hybrid", "satellite", "terrain". => the map type.
  • filter : false|true => Show filter by category.
  • scrollwheel : false|true => Enable mouse scroll wheel on Map. It auto disable with Touch Device.
  • width : auto => Enter the width of map in pixel.
  • height : 450 => Enter the height of map in pixel.
  • data_cat_ids : 11,22 => Category IDs include. There should be a comma to separate between IDs (no space)
  • zoom : auto => Set Zoom level
For EX:
[dt_woo_map maptype='hybrid' filter='false' scrollwheel='false' data_cat_ids='' zoom='']
How to find product category's ID:

To find the product category's ID go to Products > Categories and hover over a category's name. Click on it or click the link Edit which just appeared.

Then read the page URL. You will see the section tag_ID=123 where 123 is the ID of the category.




Done! :)

You can have a cuppa tea when setup WooCommerce Maps Store Locator, merely put that in anywhere to your site and magic happens!...:)

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugins on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

The DawnThemes

Don’t forget to rate the plugin 5 Starts if you like it. This means a lot to us and we'd be very thankful for your rate.
Thank you so much!

Your map suddenly stopped working and you get the following error?





The most common issues with both the server and browser API keys are caused by missing / incorrect referrers.

The referrer for the browser key should be set to the current domain ( http(s)://domain.com/* or *.domain.com/* ), and for the server key it should be set to the IP address of the current domain.

Another common issue is that a grey map in combination with a broken start location field is shown on the settings page. This points to a problem with the used browser key. The only way to find out the exact problem is by checking the console output in your browser.

You can access the browser console in Firefox with ctrlshiftk, or ctrlshiftj in Chrome.



Once you have opened the browser console, reload the page and check for any errors that are related to Google Maps. The error itself usually includes a link explaining the reason for the error and how to fix it.





Common API Errors

  1. API limit reached & For development purposes only

    If you get an ‘API limit reached’ error when you load the page, or it shows up in the browser console, then you probably didn’t enable billing in the Google API Console. This is required by Google as of July 16, 2018.

    Not having enabled billing also results in a ‘For development purposes only’ text showing up on Google Maps itself.





    If you have enabled billing but keep seeing this error, then you can contact Google Billing and Payments Support.

  2. This API project is not authorized to use this API

    This error means that API restrictions are set in the Google API Console for the used API keys.

    You can check this by going to the Google API Console, APIs & Services > click on ‘Credentials’ on the left hand side and then click on the API keys.

    Look for the ‘Key restrictions’ section and make sure the ‘API restrictions’ are set to none.





    If they are set, then click on the ‘API restrictions’ tab underneath it and remove the set restrictions. The API’s that should not have restrictions set on them are listed:

    • Maps JavaScript API
    • Places API
    • Geocoding API
    • Maps Static API

08 October 2018 - 2.0.7:
  - [Fixed] Single Product Map Shortcode Ignores Global Settings
  - [Added] Option to enter Google API Key

23 February 2018 - 2.0.6:
  - [Fixed] the Info Window style

Ver 2.0.5
  - [Fixed] Roadmap does not work.

Ver 2.0.4
- [Updated] Google Maps API
- [Added] Date sample

Ver 2.0.3
- [Updated] Compatible with Visual Composer Page Builder

Ver 2.0.2
- [Improved] infowindow close button
- [Added] Zoom level option
- [Improved] Ability select more categories for markers
- [Added] shortcode [dt_woo_single_product_map] to display single product on map.
- [Updated] documentation

Ver 2.0.1
- [Fixed] The "Get Directions" does not work.

Ver 2.0.0
- [Added] WordPress Custom Post type [maps] Support!
- [Added] include Property to limits the results to the specified categories.

Ver 1.0.0 (26 September 15)
- Initial Release