Store Locator

A drop-in module for a website that shows a google map with list of stores in the sidebar.

Live Demo

Features

• draws all stores on a map
• shows a list of stores in the side bar providing map navigation
• determines user location and sorts the stores, showing nearest first
• shows a distance to each store form a given location (walking or driving)
• allows to search for nearest store to a given location
• provides a direction link to each store
• allows to set custom markers

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microapps/store-locator@latest/dist/store-locator.css">
<script src="https://cdn.jsdelivr.net/gh/microapps/store-locator@latest/dist/store-locator.js"></script>

Usage

• Include store-locator.js and store-locator.css on your page
• Add a container where you want the map to be rendered
• Initialize the script

<div id="my-store-locator">
      <!-- map will be rendered here-->
</div>
<script src="store-locator.js"></script>
<script>
  storeLocator({
    container: 'store-locator',
    apiKey: 'GOOGLE_MAPS_API_KEY',
    center: {lat: 42.382387, lng: -71.116648},
    travelMode: 'WALKING',
    unitSystem: 'METRIC',
    storeMarkerIcon: './storeIcon.png',
    homeMarkerIcon: './homeIcon.png',
    markerIconSize: [40, 62],
    limit: 1,
    searchHint: "Not all stores sell our whole range so if you're looking for a specific product we recommend you call ahead.",
    loadStores: function(location) {
      // location: {lat, lng}
      // you can load your stores based on location dynamically
      return Promise.resolve([
        {
          name: 'PAEZ FLAGSHIP STORE EL BORN',
          address: 'Carrer de les Caputxes, 2, 08003 Barcelona, Spain',
          location: {lat: 41.3833695, lng: 2.1814855999999736},
          website: 'http://microapps.com'
        },
        {
          name: 'PAEZ STORE CC. Maremagnum',
          address: "Moll d'Espanya, 5, 08039 Barcelona, Spain",
          location: {lat: 41.3752, lng: 2.18286999999998}
        }
      ])
    }
  })
</script>

Configuration options

Option	Description	Default
container	id of the element where the map will be rendered
stores	an array of stores to render on a map [{name, address, location: {lat, lng}, website}]
loadStores	a function that returns an array of stores directly or a Promise. It accepts a location {lat, lng} param and is called every time location autocomplete is triggered
zoom	initial map zoom	6
center	initial map center	{lat: 39.6433995, lng: -6.4396778}
storeMarkerIcon	custom store marker icon
homeMarkerIcon	custom current location marker icon
markerIconSize	an array of [x, y] to scale marker icon
searchHint	text rendered after a search input
travelMode	the mode used to calculate distance WALKING or DRIVING	DRIVING
unitSystem	used to show distance METRIC or IMPERIAL	METRIC
limit	shows only first n closest results to the location	10
homeLocationHint	text that appears in an info window of home location marker	Current location
farAwayMarkerOpacity	an opacity of a marker that is too far away (determined by limit)	0.6
fullWidthMap	changes the appearance to make the map full width and store list as an overlay on top of it