Create A Store Locator Using Google Maps API – storelocatorjs

A vanilla JavaScript plugin that makes use of Google Maps API to create a customizable responsive store locator with ease.

Also provides a cloud function as a web service to filter stores by GEO position.

See Also:

• Google Maps Store Locator Plugin For jQuery

Basic usage:

1. Install and import the storelocatorjs.

# Yarn
$ yarn add storelocatorjs
# NPM
$ npm install storelocatorjs --save

import storelocatorjs from 'storelocatorjs';
import 'storelocatorjs.css';

2. Or import the storelocatorjs’ JavaScript and CSS files as follows:

<!-- Local -->
<link rel="stylesheet" href="./dist/storelocator/css/storelocator.css" />
<script src="./dist/storelocator/js/storelocator.js"></script>
<!-- Or From A CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/storelocatorjs/dist/storelocator/css/storelocator.css" />
<script src="https://cdn.jsdelivr.net/npm/storelocatorjs/dist/storelocator/js/storelocator.min.js"></script>

3. Build the HTML structure for the store locator.

<div class="storelocator">
  <div class="storelocator-loader"></div>
  <div class="storelocator-sidebar">
    <form class="storelocator-formSearch">
      <input type="text" class="storelocator-inputSearch" placeholder="Enter a location" autocomplete="off" />
    </form>
    <nav class="storelocator-nav">
      <ul class="storelocator-navList">
        <li class="storelocator-navListItem active">
          <button class="storelocator-navButton" data-switch-view data-target="map">Map</button>
        </li>
        <li class="storelocator-navListItem">
          <button class="storelocator-navButton" data-switch-view data-target="list">List</button>
        </li>
      </ul>
    </nav>
    <div class="storelocator-sidebarResults"></div>
  </div>
  <div class="storelocator-googleMaps active">
    <div id="storelocator-googleMapsCanvas"></div>
    <button class="storelocator-geolocButton"></button>
  </div>
</div>

4. Create a new store locator instance and inert your own Google Maps API key.

var myStorelocator = new storelocatorjs({
    options: {
      apiKey: 'CREATE_YOUR_API_KEY'
    }
});

5. Available options to customize the store locator.

var myStorelocator = new storelocatorjs({
    options: {
      // Google API Key
      apiKey: '',
      // web service to get JSON store datas
      webServiceUrl: '',
      // Marker Clustering Options
      cluster: {
        options: {
          averageCenter: true,
          gridSize: 50,
          imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
          maxZoom: 13,
          minimumClusterSize: 2,
          styles: [],
          zoomOnClick: true
        },
        status: false
      },
      // Debug mode
      debug: false,
      // geolocation locations
      geolocation: {
        startOnLoad: false,
        status: true
      },
      // Google Maps options
      map: {
        markers: {
          width: 30,
          height: 40,
          styles: [{
            category: 'userPosition',
            colorBackground: '#4285f4',
            colorText: '#fff'
          }]
        },
        options: {
          center: [46.227638, 2.213749],
          disableDefaultUI: false,
          fullscreenControl: true,
          mapTypeControl: false,
          mapTypeId: 'roadmap',
          scaleControl: false,
          scrollwheel: true,
          streetViewControl: false,
          styles: [],
          zoom: 6
        }
      },
      // Request options
      requests: {
        searchRadius: 50,
        storesLimit: 20
      },
      // Default selectors
      selectors: {
        container: '.storelocator',
        formSearch: '.storelocator-formSearch',
        geolocButton: '.storelocator-geolocButton',
        inputSearch: '.storelocator-inputSearch',
        loader: '.storelocator-loader',
        nav: '.storelocator-nav',
        searchFilters: '[data-filter]',
        sidebar: '.storelocator-sidebar',
        sidebarResults: '.storelocator-sidebarResults'
      },
      // markers options
      markersUpdate: {
        limitInViewport: 30,
        maxRadius: 150,
        status: true,
        stepRadius: 50
      }
    }
});

6. Execute a function when the map is instantiated and ready.

var myStorelocator = new storelocatorjs({
    options: {
      apiKey: 'CREATE_YOUR_API_KEY'
    },
    onReady: function(map) {
      this.triggerRequest({
        'lat': 48.8589507,
        'lng': 2.2770202
    });
});

Changelog:

04/09/2020

• v2.1.0