Locator
html,
body {
height: 600px;
margin: 0;
padding: 0;
}
#map-container {
width: 100%;
height: 600px;
position: relative;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
}
#map-container button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
font-size: inherit;
cursor: pointer;
}
#map {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#locations-panel {
position: absolute;
left: 0;
width: 0;
top: 0;
bottom: 0;
overflow-y: auto;
background: white;
padding: 0.5em;
box-sizing: border-box;
display: none;
}
@media only screen and (max-width: 876px) {
#map {
left: 0;
bottom: 50%;
}
#locations-panel {
top: 50%;
right: 0;
width: unset;
}
}
#locations-panel-list > header {
padding: 1.4em 1.4em 0 1.4em;
}
#locations-panel-list h1.search-title {
font-size: 1em;
font-weight: 500;
margin: 0;
}
#locations-panel-list h1.search-title > img {
vertical-align: bottom;
margin-top: -1em;
}
#locations-panel-list .search-input {
width: 100%;
margin-top: 0.8em;
position: relative;
}
#locations-panel-list .search-input input {
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3em;
height: 2.2em;
box-sizing: border-box;
padding: 0 2.5em 0 1em;
font-size: 1em;
}
#locations-panel-list .search-input-overlay {
position: absolute;
}
#locations-panel-list .search-input-overlay.search {
right: 2px;
top: 2px;
bottom: 2px;
width: 2.4em;
}
#locations-panel-list .search-input-overlay.search button {
width: 100%;
height: 100%;
border-radius: 0.2em;
color: black;
background: transparent;
}
#locations-panel-list .search-input-overlay.search .icon {
margin-top: 0.05em;
vertical-align: top;
}
#locations-panel-list .section-name {
font-weight: 500;
font-size: 0.9em;
margin: 1.8em 0 1em 1.5em;
}
#locations-panel-list .location-result {
position: relative;
padding: 0.8em 3.5em 0.8em 1.4em;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
cursor: pointer;
}
#locations-panel-list .location-result:first-of-type {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
#locations-panel-list .location-result:last-of-type {
border-bottom: none;
}
#locations-panel-list .location-result.selected {
outline: 2px solid #4285f4;
}
#locations-panel-list button.select-location {
margin-bottom: 0.6em;
}
#locations-panel-list .location-result h2.name {
font-size: 1em;
font-weight: 500;
margin: 0;
}
#locations-panel-list .location-result .address {
font-size: 0.9em;
margin-bottom: 0.5em;
}
#location-results-list {
list-style-type: none;
margin: 0;
padding: 0;
}
'use strict';
/**
* Defines an instance of the Locator+ solution, to be instantiated
* when the Maps library is loaded.
*/
function LocatorPlus(configuration) {
const locator = this;
locator.locations = configuration.locations || [];
locator.capabilities = configuration.capabilities || {};
const mapEl = document.getElementById('map');
locator.panelListEl = document.getElementById('locations-panel-list');
const sectionNameEl =
document.getElementById('location-results-section-name');
const resultsContainerEl = document.getElementById('location-results-list');
const itemsTemplate = Handlebars.compile(
document.getElementById('locator-result-items-tmpl').innerHTML);
locator.searchLocation = null;
locator.searchLocationMarker = null;
locator.selectedLocationIdx = null;
locator.userCountry = null;
// Initialize the map -------------------------------------------------------
const mapOptions = configuration.mapOptions;
locator.map = new google.maps.Map(mapEl, {
fullscreenControl: mapOptions.fullscreenControl,
zoomControl: mapOptions.zoomControl,
streetViewControl: mapOptions.streetViewControl,
mapTypeControl: mapOptions.mapTypeControl,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT,
},
});
// Store selection.
const selectResultItem = function(locationIdx, panToMarker) {
locator.selectedLocationIdx = locationIdx;
for (let locationElem of resultsContainerEl.children) {
locationElem.classList.remove('selected');
if (getResultIndex(locationElem) === locator.selectedLocationIdx) {
locationElem.classList.add('selected');
}
}
if (panToMarker && (locationIdx != null)) {
locator.map.panTo(locator.locations[locationIdx].coords);
}
};
// Create a marker for each location.
const markers = locator.locations.map(function(location, index) {
const marker = new google.maps.Marker({
position: location.coords,
map: locator.map,
title: location.title,
});
marker.addListener('click', function() {
selectResultItem(index, false);
});
return marker;
});
// Fit map to marker bounds.
locator.updateBounds = function() {
const bounds = new google.maps.LatLngBounds();
if (locator.searchLocationMarker) {
bounds.extend(locator.searchLocationMarker.getPosition());
}
for (let i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
locator.map.fitBounds(bounds);
};
locator.updateBounds();
// Get the distance of a store location to the user's location,
// used in sorting the list.
const getLocationDistance = function(location) {
if (!locator.searchLocation) return null;
// Fall back to straight-line distance.
return google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(location.coords),
locator.searchLocation.location);
};
// Render the results list --------------------------------------------------
const getResultIndex = function(elem) {
return parseInt(elem.getAttribute('data-location-index'));
};
locator.renderResultsList = function() {
let locations = locator.locations.slice();
for (let i = 0; i 0) {
const result = results[0];
geocodeCache.set(query, result);
handleResult(result);
}
}
});
};
// Set up geocoding on the search input.
searchButtonEl.addEventListener('click', function() {
geocodeSearch(searchInputEl.value.trim());
});
// Add in an event listener for the Enter key.
searchInputEl.addEventListener('keypress', function(evt) {
if (evt.key === 'Enter') {
geocodeSearch(searchInputEl.value);
}
});
}
const CONFIGURATION = {"capabilities":{"input":true},"locations":[{"title":"Marriottsville","address1":"Marriottsville","address2":"MD 21104, USA","coords":{"lat":39.349382953099386,"lng":-76.89964203558196},"placeId":"ChIJ_VRMFZcjyIkRvT0aDa-cqb8"},{"title":"Ellicott City","address1":"Ellicott City","address2":"MD, USA","coords":{"lat":39.2675811218913,"lng":-76.79825842023773},"placeId":"ChIJB298ASsgyIkRYDdyjFUZEgc"},{"title":"Columbia","address1":"Columbia","address2":"MD, USA","coords":{"lat":39.20395679918502,"lng":-76.86098719140168},"placeId":"ChIJUaBpY7Dft4kRXWOHtmW91vA"},{"title":"Westminster","address1":"Westminster","address2":"MD, USA","coords":{"lat":39.575609616061634,"lng":-76.99578807790986},"placeId":"ChIJ4wSnt_xHyIkR4A8vPHzQmS4"},{"title":"Elkridge","address1":"Elkridge","address2":"MD, USA","coords":{"lat":39.1981581147938,"lng":-76.76244829140168},"placeId":"ChIJeyqwYuzht4kRITKqVSXRfxQ"},{"title":"Laurel","address1":"Laurel","address2":"MD, USA","coords":{"lat":39.099544238540474,"lng":-76.84832219325408},"placeId":"ChIJ0dxJ6BDdt4kR_JLN_S5ezZg"},{"title":"Sykesville","address1":"Sykesville","address2":"MD 21784, USA","coords":{"lat":39.37389761934947,"lng":-76.96765467605744},"placeId":"ChIJdQ7RA6glyIkR3CGeLM_ehYQ"},{"title":"Jessup","address1":"Jessup","address2":"MD 20794, USA","coords":{"lat":39.14948052594691,"lng":-76.77519029140169},"placeId":"ChIJzSNDnsLgt4kRVKq0QaN_OCk"},{"title":"Pasadena","address1":"Pasadena","address2":"MD 21122, USA","coords":{"lat":39.10760200860365,"lng":-76.5710055625656},"placeId":"ChIJoQLjJ_z7t4kR1T3c45rFvak"}],"mapOptions":{},"mapsApiKey":"AIzaSyC8DtF6bLlLf3BtoUo815GQYQgOVc16EAM"};
function initMap() {
new LocatorPlus(CONFIGURATION);
}
{{#each locations}}
{{address1}}
{{address2}}
{{/each}}
Find a location near you
All locations
