Project status
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> 
