Map Embed Example

 

 

 

 

Locator

html,
body {
height: 100%;
margin: 0;
padding: 0;
}

#map-container {
width: 100%;
height: 100%;
position: relative;
font-family: “Roboto”, sans-serif;
box-sizing: border-box;
}

#map-container a {
text-decoration: none;
color: #1967d2;
}

#map-container button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
font-size: inherit;
cursor: pointer;
}

#gmp-map {
position: absolute;
left: 25em;
top: 0;
right: 0;
bottom: 0;
}

#locations-panel {
position: absolute;
left: 0;
width: 25em;
top: 0;
bottom: 0;
overflow-y: auto;
background: white;
padding: 0.5em;
box-sizing: border-box;
}

@media only screen and (max-width: 876px) {
#gmp-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 #80868b;
border-radius: 0.3em;
height: 2.7em;
box-sizing: border-box;
padding: 0 1em 0 2.5em;
font-size: 0.9em;
}

#locations-panel-list .search-input input:focus {
outline: 2px solid #1e88e5;
}

#locations-panel-list .search-input input::placeholder {
color: #212121;
opacity: 0.5;
}

#locations-panel-list .search-input-overlay {
position: absolute;
}

#locations-panel-list .search-input-overlay.search {
left: 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.15em;
vertical-align: top;
width: 0.9em;
}

#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;
text-align: left;
}

#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;
}

#locations-panel-list .directions-button {
position: absolute;
right: 1.2em;
top: 2.3em;
}

#locations-panel-list .directions-button-background:hover {
fill: rgba(116,120,127,0.1);
}

#locations-panel-list .directions-button-background {
fill: rgba(255,255,255,0.01);
}

#locations-panel-list .location-result .distance {
position: absolute;
top: 0.9em;
right: 0;
text-align: center;
font-size: 0.9em;
width: 5em;
}

#locations-panel-list .option-container {
display: inline-block;
margin: 0.2em 0;
position: relative;
vertical-align: top;
}

#locations-panel-list .option-container button:hover,
#locations-panel-list .option-container a:hover {
background-color: #f1f3f4;
}

#locations-panel-list .option {
border: 1px solid #e0e0e0;
border-radius: 1.3em;
color: #1967d2;
font-size: 0.9em;
font-weight: 500;
padding: 0.6em 0.7em;
}

#locations-panel-list .action-button .option {
align-items: center;
display: flex;
}

#locations-panel-list .action-button .open-icon {
/* Match link color #1967d2 */
filter: invert(30%) sepia(67%) saturate(7379%) hue-rotate(209deg) brightness(95%) contrast(80%);
height: 1.2em;
margin-right: 0.4em;
}

#locations-panel-list .action-button span {
margin-right: 0.3em;
}

#location-results-list {
list-style-type: none;
margin: 0;
padding: 0;
}

‘use strict’;

/** Helper function to generate a Google Maps directions URL */
function generateDirectionsURL(origin, destination) {
const googleMapsUrlBase = ‘https://www.google.com/maps/dir/?’;
const searchParams = new URLSearchParams(‘api=1’);
searchParams.append(‘origin’, origin);
const destinationParam = [];
// Add title to destinationParam except in cases where Quick Builder set
// the title to the first line of the address
if (destination.title !== destination.address1) {
destinationParam.push(destination.title);
}
destinationParam.push(destination.address1, destination.address2);
searchParams.append(‘destination’, destinationParam.join(‘,’));
return googleMapsUrlBase + searchParams.toString();
}

/**
* 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(‘gmp-map’);
const panelEl = document.getElementById(‘locations-panel’);
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 ——————————————————-
locator.map = new google.maps.Map(mapEl, configuration.mapOptions);

// Store selection.
const selectResultItem = function(locationIdx, panToMarker, scrollToResult) {
locator.selectedLocationIdx = locationIdx;
for (let locationElem of resultsContainerEl.children) {
locationElem.classList.remove(‘selected’);
if (getResultIndex(locationElem) === locator.selectedLocationIdx) {
locationElem.classList.add(‘selected’);
if (scrollToResult) {
panelEl.scrollTop = locationElem.offsetTop;
}
}
}
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, true);
});
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);
};
if (locator.locations.length) {
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;

// Use travel distance if available (from Distance Matrix).
if (location.travelDistanceValue != null) {
return location.travelDistanceValue;
}

// 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());
});

// Initialize Autocomplete.
initializeSearchInputAutocomplete(
locator, searchInputEl, geocodeSearch, updateSearchLocation);
}

/** Add Autocomplete to the search input. */
function initializeSearchInputAutocomplete(
locator, searchInputEl, fallbackSearch, searchLocationUpdater) {
// Set up Autocomplete on the search input. Bias results to map viewport.
const autocomplete = new google.maps.places.Autocomplete(searchInputEl, {
types: [‘geocode’],
fields: [‘place_id’, ‘formatted_address’, ‘geometry.location’]
});
autocomplete.bindTo(‘bounds’, locator.map);
autocomplete.addListener(‘place_changed’, function() {
const placeResult = autocomplete.getPlace();
if (!placeResult.geometry) {
// Hitting ‘Enter’ without selecting a suggestion will result in a
// placeResult with only the text input value as the ‘name’ field.
fallbackSearch(placeResult.name);
return;
}
searchLocationUpdater(
placeResult.formatted_address, placeResult.geometry.location);
});
}

/** Initialize Distance Matrix for the locator. */
function initializeDistanceMatrix(locator) {
const distanceMatrixService = new google.maps.DistanceMatrixService();

// Annotate travel times to the selected location using Distance Matrix.
locator.updateTravelTimes = function() {
if (!locator.searchLocation) return;

const units = (locator.userCountry === ‘USA’) ?
google.maps.UnitSystem.IMPERIAL :
google.maps.UnitSystem.METRIC;
const request = {
origins: [locator.searchLocation.location],
destinations: locator.locations.map(function(x) {
return x.coords;
}),
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: units,
};
const callback = function(response, status) {
if (status === ‘OK’) {
const distances = response.rows[0].elements;
for (let i = 0; i < distances.length; i++) {
const distResult = distances[i];
let travelDistanceText, travelDistanceValue;
if (distResult.status === 'OK') {
travelDistanceText = distResult.distance.text;
travelDistanceValue = distResult.distance.value;
}
const location = locator.locations[i];
location.travelDistanceText = travelDistanceText;
location.travelDistanceValue = travelDistanceValue;
}

// Re-render the results list, in case the ordering has changed.
locator.renderResultsList();
}
};
distanceMatrixService.getDistanceMatrix(request, callback);
};
}

const CONFIGURATION = {
“locations”: [
{“title”:”Atracare – Pediatrics, Primary Care, \u0026 Urgent Care Clinic”,”address1″:”18068 Coastal Hwy”,”address2″:”Lewes, DE 19958, USA”,”coords”:{“lat”:38.745668942114314,”lng”:-75.15569283624572},”placeId”:”ChIJKatbRLi5uIkRGXfjmyleYSY”,”actions”:[{“label”:”Book appointment”,”defaultUrl”:”https://atracare.com/”}]},
{“title”:”Atracare – Urgent Care Clinic”,”address1″:”90 Atlantic Ave Suite 4″,”address2″:”Ocean View, DE 19970, USA”,”coords”:{“lat”:38.54456566055961,”lng”:-75.09555643558197},”placeId”:”ChIJDQ-iRnnPuIkRumZf20A87z4″},
{“title”:”Atracare – Mental Health”,”address1″:”1532 Savannah Rd A”,”address2″:”Lewes, DE 19958, USA”,”coords”:{“lat”:38.753311736200416,”lng”:-75.16127037976229},”placeId”:”ChIJp7tia9K5uIkRSYSzauT7vTs”}
],
“mapOptions”: {“center”:{“lat”:38.0,”lng”:-100.0},”fullscreenControl”:true,”mapTypeControl”:false,”streetViewControl”:false,”zoom”:4,”zoomControl”:true,”maxZoom”:17,”mapId”:””},
“mapsApiKey”: “AIzaSyAE870KdQuKI-6TfqcqSP4EV8pG0Craa4A”,
“capabilities”: {“input”:true,”autocomplete”:true,”directions”:false,”distanceMatrix”:true,”details”:false,”actions”:true}
};

function initMap() {
new LocatorPlus(CONFIGURATION);
}

{{#each locations}}

  • {{address1}}
    {{address2}}
    {{#each actions}}
    {{#if defaultUrl}}

    {{/if}}
    {{/each}}

    {{#if travelDistanceText}}

    {{travelDistanceText}}

    {{/if}}

  • {{/each}}


    Find a location near you

    All locations

      Latest News and Clinic Information

      We are your partner in health. Stay up to date with latest news and information.

      The Top 6 Things Seniors Can Do to Boost Longevity and Quality of Life

      As we age, taking proactive steps toward a healthier lifestyle can significantly improve longevity, heart health, mood, and overall quality of life. While age-related conditions like heart disease become more common, they are not inevitable. With a few lifestyle adjustments, seniors can maintain their vitality and well-being. Learn More >

      Read More

      Mental Health Strategies for a Brighter Season in Delaware

      Winter in Delaware can be beautiful, but it can also bring a range of challenges to our mental health. With shorter days, colder temperatures, and less sunlight, many people start feeling a little down during the winter months. If you find yourself struggling with low energy, mood swings, or just feeling off during this time of year, you might be experiencing Seasonal Affective Disorder (SAD)—a type of depression that hits hardest when the weather turns cold.

      Read More

      Flu Season in Delaware: Essential Information for Residents

      Flu season is upon us, and it’s essential for everyone in Delaware to be prepared. The flu, or influenza, is a contagious respiratory illness that can lead to serious health issues, so understanding its symptoms, prevention strategies, and treatment options is crucial. Let’s break down what you need to know to keep yourself and your loved ones healthy this flu season.

      Read More