A webcomponent to serve a store locator via google maps.
You can simply download the compiled version as zip file here and inject it after needed dependencies:
<!--Inject downloaded file:
<script src="index.js"></script>
-->
<!--Or integrate via cdn:-->
<script
src="https://torben.website/storelocator/data/distributionBundle/index.js"
></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.
If you are using npm as package manager you can simply add this tool to your package.json as dependency:
...
"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.
...
import storeLocatorAPI from 'storelocator'
// Default tag name is "store-locator".
storelocatorAPI.register(/*'my-store-locator-tag-name'*/)
...Then inject component in html:
<store-locator></store-locator>store-locator {
font-family: Roboto, Arial, sans-serif;
display: block;
width: 100%;
height: 400px;
margin: 0px;
padding: 0px
}
.web-component-template {
display: none;
}
store-locator > div {
height: 100%;
}
.store-locator__input {
margin-top: 9px;
margin-left: 9px;
width: 230px;
}
store-locator .gm-style-iw > div {
width: 225px;
height: 60px;
padding: 5px;
}Download, register component and use new component.
<script
src="https://torben.website/storelocator/data/distributionBundle/index.js"
></script>
<script>
console.info('Register "store-locator" tag name.')
storelocator.index.api.register()
</script>
<store-locator
configuration="{
applicationInterface: {
// NOTE: You should use your own google maps application interface
// key.
key: 'AIzaSyBAoKgqF4XaDblkRP4-94BITpUKzB767LQ'
}
}"
>
<input>
</store-locator><store-locator
configuration="{
applicationInterface: {
// NOTE: You should use your own google maps application interface
// key.
key: 'AIzaSyBAoKgqF4XaDblkRP4-94BITpUKzB767LQ'
},
ipToLocationApplicationInterface: {
bounds: {
northEast: {latitude: 55.12, longitude: 14.89},
southWest: {latitude: 47.32, longitude: 5.50}
},
key: '11a62990a1424e894da6eec464a747e6'
},
defaultMarkerIconFileName:
'https://via.placeholder.com/50/0099ff/ffffff.png',
// Automatically generated stores with option: {stores: bounds}
stores: [
{
address:
'Elgendorfer Str. 57, 56410 Montabaur, Deutschland',
eMailAddress: 'info@fake-1.de',
id: 1,
latitude: 50.4356,
longitude: 7.81226,
name: '1 & 1 Telecom GmbH',
phoneNumber: '+49 721 9600'
},
{
address:
'Freiheitsstr.1a, 53842 Troisdorf, Deutschland',
eMailAddress: '1a@demo.de',
id: 2,
latitude: 50.82791,
longitude: 7.1219600000000005,
name: '1A-Bike&Parts GmbH',
phoneNumber: '02241 / 91 18 09 3',
websiteURL: 'http://www.1a-bike.bike'
},
{
address:
'Niederrheinische Str. 27, 34626 Neukirchen, Deutschland',
eMailAddress: 'tfddfa@de.de',
id: 3,
latitude: 50.871640000000006,
longitude: 9.337940000000001,
name: '1a Fahrradservice',
phoneNumber: '+49 (6694) 7878',
websiteURL: 'http://www.1a-fahrradservice-diegelmann.de'
},
{
address:
'Dener Strasse 73, 48653 Coesfeld, Deutschland',
eMailAddress: '12345@example.org',
id: 4,
latitude: 51.93271000000001,
longitude: 9.337940000000001,
name: '2-Rad-Baumeister',
phoneNumber: '+49 (2541) 2509',
websiteURL: 'www.2rad-baumeister.de'
},
{
address:
'Friedrichstr. 100, 47475 Kamp - Lintfort, Deutschland',
eMailAddress: 'test@example.org',
id: 5,
latitude: 51.508750000000006,
longitude: 6.553020000000001,
name: '2 - Rad Behringer',
phoneNumber: '02842 / 42 471',
websiteURL: 'www.zweirad-behringer.de'
},
{
address:
'Werster Str. 86, 32549 Bad Oeynhausen, Deutschland',
eMailAddress: 'test@example.org',
id: 6,
latitude: 52.215630000000004,
longitude: 8.785,
name:
'2Rad Berger Fahrradhandel & Tankstelle Marcus Berger',
phoneNumber: '+49 (5731) 28930',
websiteURL: 'www.2radberger.de'
},
{
address: 'Rauchstr. 16, 34454 Bad Arolsen, Deutschland',
eMailAddress: 'test@example.org',
id: 7,
latitude: 51.38242,
longitude: 9.01524,
name: '2Rad Br\u00fcne',
phoneNumber: '05691 / 2220',
websiteURL: 'http://2rad-bruene.de'
},
{
address: 'Schneiderstr.40, 46244 Bottrop, Deutschland',
id: 8,
latitude: 51.57477,
longitude: 6.90406,
name: '2 - Rad B\u00fcning',
phoneNumber: '02045 / 57 38',
websiteURL: 'http://www.2-rad-buening.de'
},
{
address: 'Butenwall 63, 46325 Borken, Deutschland',
eMailAddress: 'test@example.org',
id: 9,
latitude: 51.846050000000005,
longitude: 6.8543,
name: '2Rad Busch',
phoneNumber: '+49 (2861) 2692',
websiteURL: 'www.2rad-busch.de '
},
{
address:
'Herzebrockerstrasse 12, 33378 Rheda-Wiedenbrück, Deutschland',
eMailAddress: 'test@example.org',
id: 10,
latitude: 51.85799,
longitude: 8.28283,
name: '2-rad Butschko',
phoneNumber: '05242 / 4 31 61',
websiteURL: 'http://www.zweirad-butschko.de'
}
],
limit: {
northEast: {latitude: 55.12, longitude: 14.89},
southWest: {latitude: 47.32, longitude: 5.50}
},
map: {minZoom: 5, zoom: 9},
search: {}
}"
>
<input
bind-property-title="configuration.name"
class="store-locator__input"
placeholder="Please provide some search words"
slot="input"
/>
<a
class="store-locator__link"
href="https://www.google.com"
slot="link"
>Legal notes example</a>
</store-locator>