serves a google maps store locator


Keywords
storeLocator, store, locator, map, location, finder
License
CC-BY-3.0
Install
npm install storelocator@1.0.232

Documentation

Project status

npm version downloads build status code coverage dependencies development dependencies peer dependencies documentation website

Use case

A jQuery plugin to serve a store locator with google maps Application interface.

Content

[TOC]

Installation

Classical dom injection

You can simply download the compiled version as zip file here and inject it after needed dependencies:

#!HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://goo.gl/HEL97d"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
<!--Inject downloaded file:-->
<script src="index.compiled.js"></script>
<!--Or integrate via cdn:
<script src="https://goo.gl/s6wRPb"></script>
-->

The compiled bundle supports AMD, commonjs, commonjs2 and variable injection into given context (UMD) as export format: You can use a module bundler if you want.

Package managed and module bundled

If you are using npm as package manager you can simply add this tool to your package.json as dependency:

#!JSON

...
"dependencies": {
    ...
    "storelocator": "latest",
    ...
},
...

After updating your packages you can simply depend on this script and let a module bundler do the hard stuff or access it via an exported variable name in given context.

#!JavaScript

...
import StoreLocator from 'storelocator'
class SpecialStoreLocator extends StoreLocator...
// or
import {$} from 'storelocator'
class SpecialStoreLocator extends $.StoreLocator.class ...
// or
StoreLocator = require('storelocator').default
value instanceof StoreLocator
// or
$ = require('storelocator').$
$('[store-locator]').StoreLocator()
...

Examples

Adding some style to our store locator examples

#!CSS

body.documentation simple-store-locator,
body.documentation advanced-store-locator,
body.documentation div.store-locator-with-bounds {
    width: 100%;
    height: 400px;
    margin: 0px;
    padding: 0px
}
body.documentation simple-store-locator > div,
body.documentation advanced-store-locator > div,
body.documentation div.store-locator-with-bounds > div {
    height: 100%;
}
body.documentation simple-store-locator input.form-control,
body.documentation advanced-store-locator input.form-control,
body.documentation div.store-locator-with-bounds input.form-control {
    margin-top: 9px;
    margin-left: 9px;
    width: 230px;
}
body.documentation simple-store-locator div.gm-style-iw > div,
body.documentation advanced-store-locator div.gm-style-iw > div,
body.documentation div.store-locator-with-bounds div.gm-style-iw > div {
    width: 225px;
    height: 60px;
    padding: 5px;
}

Load needed dependencies

#!JavaScript

const dependenciesLoadPromise = $documentationWebsite.getScript(
    'https://code.jquery.com/jquery-3.1.1.min.js'
).then(() => $.getScript('https://goo.gl/HEL97d')).then(() => $.getScript(
    'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/' +
    'markerclusterer.js'
)).then(() => $.getScript('https://goo.gl/s6wRPb'))

Simple example

#!HTML

<script>
    dependenciesLoadPromise.always(() => $(
        'body simple-store-locator'
    ).StoreLocator({applicationInterface: {
        // NOTE: You should use your own google maps application interface
        // key.
        key: 'AIzaSyBAoKgqF4XaDblkRP4-94BITpUKzB767LQ'
    }}))
</script>
<simple-store-locator><input class="form-control"></simple-store-locator>

Advanced example with all available (default) options

#!HTML

<script>
    dependenciesLoadPromise.always(() => $(
        'body advanced-store-locator'
    ).StoreLocator({
        applicationInterface: {
            url:
                'https://maps.googleapis.com/maps/api/js' +
                '?{1}v=3&sensor=false&libraries=places,geometry&' +
                'callback={2}',
            callbackName: null,
            // NOTE: You should use your own google maps application
            // interface key.
            key: 'AIzaSyBAoKgqF4XaDblkRP4-94BITpUKzB767LQ'
        },
        stores: {
            northEast: {latitude: 85, longitude: 180},
            southWest: {latitude: -85, longitude: -180},
            number: 100,
            generateProperties: (store) => store
        },
        addtionalStoreProperties: {},
        iconPath: '/webAsset/image/storeLocator/',
        defaultMarkerIconFileName: null,
        startLocation: null,
        fallbackLocation: {latitude: 51.124213, longitude: 10.147705},
        ip: null,
        ipToLocation: {
            applicationInterfaceURL: '{1}://freegeoip.net/json/{2}',
            timeoutInMilliseconds: 5000,
            bounds: {
                northEast: {latitude: 85, longitude: 180},
                southWest: {latitude: -85, longitude: -180}
            }
        },
        map: {zoom: 3},
        showInputAfterLoadedDelayInMilliseconds: 500,
        input: {
            hide: {opacity: 0},
            showAnimation: [{opacity: 1}, {duration: 'fast'}]
        },
        distanceToMoveByDuplicatedEntries: 0.0001,
        marker: {
            cluster: {
                gridSize: 100, maxZoom: 11, imagePath:
                    'https://cdn.rawgit.com/googlemaps/' +
                    'js-marker-clusterer/gh-pages/images/m'
            },
            icon: {
                size: {width: 44, height: 49, unit: 'px'},
                scaledSize: {width: 44, height: 49, unit: 'px'}
            }
        },
        successfulSearchZoom: 12,
        infoWindow: {
            content: null,
            additionalMoveToBottomInPixel: 120,
            loadingContent: '<div class="idle">loading...</div>'
        },
        searchBox: 50,
        onInfoWindowOpen: $.noop,
        onInfoWindowOpened: $.noop,
        onAddSearchResults: $.noop,
        onRemoveSearchResults: $.noop,
        onOpenSearchResults: $.noop,
        onCloseSearchResults: $.noop,
        onMarkerHighlighted: $.noop
    }))
</script>
<advanced-store-locator>
    <input class="form-control">
</advanced-store-locator>

Example with limited traversable area (Germany)

#!HTML

<script>
    dependenciesLoadPromise.always(() => {
        const bounds = {
            northEast: {latitude: 55.12, longitude: 14.89},
            southWest: {latitude: 47.32, longitude: 5.50}
        }
        $('body div.store-locator-with-bounds').StoreLocator({
            applicationInterface: {
                // NOTE: You should use your own google maps applciation
                // interface key.
                key: 'AIzaSyBAoKgqF4XaDblkRP4-94BITpUKzB767LQ'
            },
            ipToLocation: {bounds},
            limit: {zoom: {minimum: 5}, bounds},
            map: {zoom: 5},
            stores: bounds
        })
    })
</script>
<div class="store-locator-with-bounds"><input class="form-control"></div>