• Facebook
  • Twitter

Shop Locator

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

Shop Locator plugin allows you to create a map with simple HTML markup and customize it with number of various parameters. Change map marker, pagination type, add infoBubbles and much more.
Please read this documentation to discover all available options.

Plugin Installation

Shop Locator requires the following scripts to be attached in HTML page:

Once scripts are attached – induce your google map with the simple HTML markup:

We prepared for you 9 predefined map styles, though there are also number of parameters editable via javascript attributes.

Bee

Bee

Cosmic

Cosmic

Dark

Dark

Lollipop

Lollipop

Material

Material

Metro

Metro

Modern

Modern

Pop

Pop

Retro

Retro

Available parameters

Nested Options Name Type Description
pluginStyle string Add class to element we call the script
paginationStyle integer Change pagination style, value 1 or 2
preloader boolean Enable/Disable preloader to plugin body.
json string Add json file

EXAMPLE:

How it looks?

Pagination - type 1

Pagination – type 1

Pagination - type 2

Pagination – type 2

MAP
center array, integer Center map on longitude and latitude.
MapType google map method Type of the map, MapTypeId.ROADMAP, MapTypeId.SATELLITE, MapTypeId.HYBRID, MapTypeId.TERRAIN
disableDefaultUI boolean Disable default google maps UI.
mapStyle array Add custom map style.
draggable boolean Drag event to the map.
disableDoubleClickZoom boolean Disable DB click zoom on the map.
maxZoom integer Set max zoom to map.
minZoom integer Set min zoom to map.
scrollwheel boolean Zoom with mouse scrollwheel.
Zoom integer Set zoom to map.
allMarkersInViewport boolean Set viewport to fit all markers.

EXAMPLE:

infoBubble
visible boolean Enable/disable infoBubble(infoWindow).
padding integer Add padding to infoBubble main container.
borderRadius integer Add border radius to infoBubble main container.
borderWidth integer Add border width radius to infoBubble main container.
borderColor string Add border color to infoBubble main container.
backgroundColor string Add color to infoBubble main container.
shadowStyle integer Pick shadow style, value 0, 1 or 2.
minHeight integer Add min height to infoBubble main container.
maxHeight integer Add max height to infoBubble main container.
minWidth integer Add min width to infoBubble main container.
maxWidth integer Add max height to infoBubble main container.
arrowStyle integer Change arrow style, value 0, 1, 2.
arrowSize integer Size of arrow.
arrowPosition integer Position of arrow.
hideCloseButton boolean Show/hide close button.
closeSrc string Path to closeButton icon.
disableAutoPan boolean Enable/Disable auto pan to element.
markersIcon string Add path to marker image.
getDirectionsButton boolean Enable/Disable directions to location
getDirectionsButtonName string Name of directions button.
directionsUseGeolocation boolean Directions by geolocation, if false directions are calculated by adding some location in searchbox.

EXAMPLE:

Info bubble content

Info bubble content

MARKER
latlng array, integer Add lat and lng where will be the marker on map.
title string Data for infowindow.
street string Data for infowindow.
zip string Data for infowindow.
city string Data for infowindow.

EXAMPLE:

CLUSTER
enable boolean Enable/disable marker clustering.
gridSize integer The grid size of a cluster in pixels. The grid is a square.
maxZoom integer Max zoom where cluster is active.
style{
fontFamily string Cluster font.
fontStyle string Style of the font(inherit, italic, normal, oblique)
textColor string Color of the text.
fontWeight string Same as css.
textSize integer Size of the text.
heightSM, heightMD, heightBIG integer Height of small, medium and big cluster.
widthSM, widthMD, widthBIG integer Width of small, medium and big cluster
iconSmall, iconMedium, iconBig string Path to icon for all cluster size.

EXAMPLE:

SIDEBAR
visible boolean Enable/disable sidebar.
selectSection
visible boolean Enable/disable json multiple files.
pathToJSONDirectory boolean Path to JSON directory
difFiles array, string [[“selectText1”, “selectValue1”], [“selectText2”, “selectValue2”]]. It’s for multiple json file. In “selectText” you input what you want to display in select option, “selectValue” is for name of the json file that will be loaded when user pick it.
fileTypes string File types, json or php.
searchBox:
findPlaceBy string Search locations by cities or regions.
searchByCountry array Filter by country. To enable you need to change value for true. Country use ISO 3166-1 Alpha-2 country code. More information you can find here.
visible boolean Enable/disable search box.
search boolean Enable/disable search on displayed markers.
searchRadius integer Radius of the search in km.
results
visibleInFirstPage boolean Enable/disable marker buttons on first page.
pageSize integer Results items per page.
currenPage integer Active results page.
paginationItems integer Pagination items per page.

Custom JSON file

You can define your custom JSON file with data for all map markers. Example of json files is attached in plugin package in src/json directory.

Example of JSON file

Example of JSON file

By default the following values from JSON are supported by plugin:

  • latitude (lat),
  • longitude (lng),
  • title,
  • street,
  • city,
  • zip code (zip)

If you would like to add more parameters to your JSON file – remember to update the plugin settings in file shop-locator.js:

Add new JSON nodes here

Add new JSON nodes here

To induce your JSON file in plugin, please update its path via json: parameter:

To attach multiple custom JSON files to plugin you need to update also the following javascript attributes:

  • pathToJSONDirectory,
  • difFiles,
  • fileTypes,

With new values adjusted to new JSON structure.

Custom JSON attachment

Custom JSON attachment

Example of usage.

Below you will find examples of map styles, which you can create with our plugin:

Examples of usage

Examples of usage

How to use different markers on the same map?

Creating new reference:

To achieve this you need to go to the shop-locator.js file. There you will find displayMarkers function. You will need to add there an extra reference for the .json file

Just like you can see on this image below:

add icon

adding reference

Now you can add different marker for each place you want to show on your map.

Adding markers:

Just go to the .json file where you are keeping all the json marker and add new field with the path to the image you want to use:

adding new field

adding new field

Please remember: All of the locations in the .json file need to have icon field with the path to the image.

Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!