Neighborhood Discovery<\/title>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/handlebars\/4.7.7\/handlebars.min.js\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" rel=\"stylesheet\"\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\"\/>\r\n <style>\r\n html, body {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n .neighborhood-discovery {\r\n box-sizing: border-box;\r\n font-family: \"Roboto\", sans-serif;\r\n height: 100%;\r\n position: relative;\r\n width: 100%;\r\n }\r\n\r\n .neighborhood-discovery a {\r\n color: #4285f4;\r\n text-decoration: none;\r\n }\r\n\r\n .neighborhood-discovery button {\r\n background: none;\r\n border: none;\r\n color: inherit;\r\n cursor: pointer;\r\n font: inherit;\r\n font-size: inherit;\r\n padding: 0;\r\n }\r\n\r\n .neighborhood-discovery .info {\r\n color: #555;\r\n font-size: 0.9em;\r\n margin-top: 0.3em;\r\n }\r\n\r\n .neighborhood-discovery .panel {\r\nbackground: white;\r\n bottom: 0;\r\n box-sizing: border-box;\r\n left: 0;\r\n overflow-y: scroll !important;\r\n position: absolute;\r\n top: 0;\r\n width: 20em;\r\n height: 450px;\r\n }\r\n\r\n .neighborhood-discovery .panel.no-scroll {\r\n overflow-y: hidden;\r\n }\r\n\r\n .neighborhood-discovery .photo {\r\n background-color: #dadce0;\r\n background-position: center;\r\n background-size: cover;\r\n border-radius: 0.3em;\r\n cursor: pointer;\r\n }\r\n\r\n .neighborhood-discovery .navbar {\r\n background: white;\r\n position: sticky;\r\n top: 0;\r\n z-index: 2;\r\n }\r\n\r\n .neighborhood-discovery .right {\r\n float: right;\r\n }\r\n\r\n .neighborhood-discovery .travel-icon {\r\n height: 1.2em;\r\n margin-top: -0.08em;\r\n vertical-align: top;\r\n }\r\n\r\n .neighborhood-discovery .map {\r\n bottom: 0;\r\n left: 20em;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n height: 450px;\r\n width: 800px;\r\n}\r\n\r\n\r\n\r\n\r\n @media only screen and (max-width: 640px) {\r\n .neighborhood-discovery .panel {\r\n right: 0;\r\n top: 50%;\r\n width: unset;\r\n }\r\n\r\n .neighborhood-discovery .map {\r\n bottom: 50%;\r\n left: 0;\r\n }\r\n }\r\n\r\n \/* --------------------------- PLACES PANEL --------------------------- *\/\r\n\r\n .neighborhood-discovery .places-panel {\r\n box-shadow: 0px 0 10px rgb(60 64 67 \/ 28%);\r\n z-index: 1;\r\n }\r\n\r\n .neighborhood-discovery .places-panel header {\r\n padding: 0.5em;\r\n }\r\n\r\n .neighborhood-discovery .search-input input {\r\n border: 1px solid rgba(0, 0, 0, 0.2);\r\n border-radius: 0.3em;\r\n box-sizing: border-box;\r\n font-size: 1em;\r\n height: 2.2em;\r\n padding: 0 2.5em 0 1em;\r\n width: 100%;\r\n }\r\n\r\n .neighborhood-discovery .search-input button {\r\n position: absolute;\r\n right: 0.8em;\r\n top: 0.8em;\r\n }\r\n\r\n .neighborhood-discovery .show-more-button {\r\n bottom: 0.5em;\r\n display: none;\r\n left: 28%;\r\n line-height: 1.5em;\r\n padding: 0.6em;\r\n position: relative;\r\n width: 44%;\r\n }\r\n\r\n .neighborhood-discovery .show-more-button.sticky {\r\n background: white;\r\n border-radius: 1.5em;\r\n box-shadow: 0 4px 10px rgb(60 64 67 \/ 28%);\r\n position: sticky;\r\n z-index: 2;\r\n }\r\n\r\n .neighborhood-discovery .show-more-button:disabled {\r\n opacity: 0.5;\r\n }\r\n\r\n .neighborhood-discovery .place-results-list {\r\n list-style-type: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n .neighborhood-discovery .place-result {\r\n border-top: 1px solid rgba(0, 0, 0, 0.12);\r\n cursor: pointer;\r\n display: flex;\r\n padding: 0.8em;\r\n }\r\n\r\n .neighborhood-discovery .place-result .text {\r\n flex-grow: 1;\r\n }\r\n\r\n .neighborhood-discovery .place-result .name {\r\n font-size: 1em;\r\n font-weight: 500;\r\n text-align: left;\r\n }\r\n\r\n .neighborhood-discovery .place-result .photo {\r\n flex: 0 0 4em;\r\n height: 4em;\r\n margin-left: 0.8em;\r\n }\r\n\r\n \/* -------------------------- DETAILS PANEL --------------------------- *\/\r\n\r\n .neighborhood-discovery .details-panel {\r\n display: none;\r\n z-index: 20;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .back-button {\r\n color: #4285f4;\r\n padding: 0.9em;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .back-button .icon {\r\n \/* Match link color #4285f4 *\/\r\n filter: invert(47%) sepia(71%) saturate(2372%) hue-rotate(200deg) brightness(97%) contrast(98%);\r\n height: 1.2em;\r\n width: 1.2em;\r\n vertical-align: bottom;\r\n }\r\n\r\n .neighborhood-discovery .details-panel header {\r\n padding: 0.9em;\r\n }\r\n\r\n .neighborhood-discovery .details-panel h2 {\r\n font-size: 1.4em;\r\n font-weight: 400;\r\n margin: 0;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .section {\r\n border-top: 1px solid rgba(0, 0, 0, 0.12);\r\n padding: 0.9em;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .contact {\r\n align-items: center;\r\n display: flex;\r\n font-size: 0.9em;\r\n margin: 0.8em 0;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .contact .icon {\r\n width: 1.5em;\r\n height: 1.5em;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .contact .text {\r\n margin-left: 1em;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .contact .weekday {\r\n display: inline-block;\r\n width: 5em;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .photos {\r\n text-align: center;\r\n padding: 0;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .photo {\r\n border-radius: 0;\r\n height: 0;\r\n margin-bottom: 0.3em;\r\n padding-top: 100%;\r\n width: 100%;\r\n }\r\n\r\n .neighborhood-discovery .details-panel .attribution {\r\n color: #777;\r\n margin: 0;\r\n font-size: 0.8em;\r\n font-style: italic;\r\n }\r\n\r\n \/* --------------------------- PHOTO MODAL ---------------------------- *\/\r\n\r\n .neighborhood-discovery .photo-modal {\r\n background: rgba(0, 0, 0, 0.8);\r\n display: none;\r\n height: 100%;\r\n position: fixed;\r\n width: 100%;\r\n z-index: 100;\r\n }\r\n\r\n .neighborhood-discovery .photo-modal > img {\r\n bottom: 0;\r\n left: 0;\r\n margin: auto;\r\n max-height: 100%;\r\n max-width: 100%;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .neighborhood-discovery .photo-modal > div {\r\n border-radius: 0.4em;\r\n color: white;\r\n background: rgba(0, 0, 0, 0.6);\r\n margin: 1em;\r\n padding: 0.9em;\r\n position: absolute;\r\n }\r\n\r\n .neighborhood-discovery .photo-modal .back-button .icon {\r\n filter: brightness(0) invert(1);\r\n margin: 0.4em 0.6em 0 0;\r\n }\r\n\r\n .neighborhood-discovery .photo-modal .photo-text {\r\n float: right;\r\n }\r\n\r\n .neighborhood-discovery .photo-modal .photo-attrs {\r\n font-size: 0.8em;\r\n margin-top: 0.3em;\r\n }\r\n <\/style>\r\n <script>\r\n 'use strict';\r\n\r\n \/** Hides a DOM element and optionally focuses on focusEl. *\/\r\n function hideElement(el, focusEl) {\r\n el.style.display = 'none';\r\n if (focusEl) focusEl.focus();\r\n }\r\n\r\n \/** Shows a DOM element that has been hidden and optionally focuses on focusEl. *\/\r\n function showElement(el, focusEl) {\r\n el.style.display = 'block';\r\n if (focusEl) focusEl.focus();\r\n }\r\n\r\n \/** Determines if a DOM element contains content that cannot be scrolled into view. *\/\r\n function hasHiddenContent(el) {\r\n const noscroll = window.getComputedStyle(el).overflowY.includes('hidden');\r\n return noscroll && el.scrollHeight > el.clientHeight;\r\n }\r\n\r\n \/** Format a Place Type string by capitalizing and replacing underscores with spaces. *\/\r\n function formatPlaceType(str) {\r\n const capitalized = str.charAt(0).toUpperCase() + str.slice(1);\r\n return capitalized.replace(\/_\/g, ' ');\r\n }\r\n\r\n \/**\r\n * Constructs an array of opening hours by day from a PlaceOpeningHours object,\r\n * where adjacent days of week with the same hours are collapsed into one element.\r\n *\/\r\n function parseDaysHours(openingHours) {\r\n const daysHours = openingHours.weekday_text.map((e) => e.split(\/\\:\\s+\/))\r\n .map((e) => ({'days': e[0].substr(0, 3), 'hours': e[1]}));\r\n\r\n for (let i = 1; i < daysHours.length; i++) {\r\n if (daysHours[i - 1].hours === daysHours[i].hours) {\r\n if (daysHours[i - 1].days.indexOf('-') !== -1) {\r\n daysHours[i - 1].days =\r\n daysHours[i - 1].days.replace(\/\\w+$\/, daysHours[i].days);\r\n } else {\r\n daysHours[i - 1].days += ' - ' + daysHours[i].days;\r\n }\r\n daysHours.splice(i--, 1);\r\n }\r\n }\r\n return daysHours;\r\n }\r\n\r\n \/** Number of POIs to show on widget load. *\/\r\n const ND_NUM_PLACES_INITIAL = 5;\r\n\r\n \/** Number of additional POIs to show when 'Show More' button is clicked. *\/\r\n const ND_NUM_PLACES_SHOW_MORE = 5;\r\n\r\n \/** Maximum number of place photos to show on the details panel. *\/\r\n const ND_NUM_PLACE_PHOTOS_MAX = 6;\r\n\r\n \/** Minimum zoom level at which the default map POI pins will be shown. *\/\r\n const ND_DEFAULT_POI_MIN_ZOOM = 18;\r\n\r\n \/** Mapping of Place Types to Material Icons used to render custom map markers. *\/\r\n const ND_MARKER_ICONS_BY_TYPE = {\r\n \/\/ Full list of icons can be found at https:\/\/fonts.google.com\/icons\r\n '_default': 'circle',\r\n 'park': 'park',\r\n 'gym': 'fitness_center',\r\n 'book_store': 'local_mall',\r\n 'home_goods_store': 'local_mall',\r\n 'primary_school': 'school',\r\n 'secondary_school': 'school',\r\n };\r\n\r\n \/**\r\n * Defines an instance of the Neighborhood Discovery widget, to be\r\n * instantiated when the Maps library is loaded.\r\n *\/\r\n function NeighborhoodDiscovery(configuration) {\r\n const widget = this;\r\n const widgetEl = document.querySelector('.neighborhood-discovery');\r\n\r\n widget.center = configuration.mapOptions.center;\r\n widget.places = configuration.pois || [];\r\n\r\n \/\/ Initialize core functionalities -------------------------------------\r\n\r\n initializeMap();\r\n initializePlaceDetails();\r\n initializeSidePanel();\r\n\r\n \/\/ Initialize additional capabilities ----------------------------------\r\n\r\n initializeSearchInput();\r\n initializeDistanceMatrix();\r\n initializeDirections();\r\n\r\n \/\/ Initializer function definitions ------------------------------------\r\n\r\n \/** Initializes the interactive map and adds place markers. *\/\r\n function initializeMap() {\r\n const mapOptions = configuration.mapOptions;\r\n widget.mapBounds = new google.maps.Circle(\r\n {center: widget.center, radius: configuration.mapRadius}).getBounds();\r\n mapOptions.restriction = {latLngBounds: widget.mapBounds};\r\n mapOptions.mapTypeControlOptions = {position: google.maps.ControlPosition.TOP_RIGHT};\r\n widget.map = new google.maps.Map(widgetEl.querySelector('.map'), mapOptions);\r\n widget.map.fitBounds(widget.mapBounds, \/* padding= *\/ 0);\r\n widget.map.addListener('click', (e) => {\r\n \/\/ Check if user clicks on a POI pin from the base map.\r\n if (e.placeId) {\r\n e.stop();\r\n widget.selectPlaceById(e.placeId);\r\n }\r\n });\r\n widget.map.addListener('zoom_changed', () => {\r\n \/\/ Customize map styling to show\/hide default POI pins or text based on zoom level.\r\n const hideDefaultPoiPins = widget.map.getZoom() < ND_DEFAULT_POI_MIN_ZOOM;\r\n widget.map.setOptions({\r\n styles: [{\r\n featureType: 'poi',\r\n elementType: hideDefaultPoiPins ? 'labels' : 'labels.text',\r\n stylers: [{visibility: 'off'}],\r\n }],\r\n });\r\n });\r\n\r\n const markerPath = widgetEl.querySelector('.marker-pin path').getAttribute('d');\r\n const drawMarker = function(title, position, fillColor, strokeColor, labelText) {\r\n return new google.maps.Marker({\r\n title: title,\r\n position: position,\r\n map: widget.map,\r\n icon: {\r\n path: markerPath,\r\n fillColor: fillColor,\r\n fillOpacity: 1,\r\n strokeColor: strokeColor,\r\n anchor: new google.maps.Point(13, 35),\r\n labelOrigin: new google.maps.Point(13, 13),\r\n },\r\n label: {\r\n text: labelText,\r\n color: 'white',\r\n fontSize: '16px',\r\n fontFamily: 'Material Icons',\r\n },\r\n });\r\n };\r\n\r\n \/\/ Add marker at the center location (if specified).\r\n if (configuration.centerMarker && configuration.centerMarker.icon) {\r\n drawMarker('Home', widget.center,\r\n '#1A73E8', '#185ABC', configuration.centerMarker.icon);\r\n }\r\n\r\n \/\/ Add marker for the specified Place object.\r\n widget.addPlaceMarker = function(place) {\r\n place.marker = drawMarker(place.name, place.coords, '#EA4335', '#C5221F', place.icon);\r\n place.marker.addListener('click', () => void widget.selectPlaceById(place.placeId));\r\n };\r\n\r\n \/\/ Fit map to bounds that contain all markers of the specified Place objects.\r\n widget.updateBounds = function(places) {\r\n const bounds = new google.maps.LatLngBounds();\r\n bounds.extend(widget.center);\r\n for (let place of places) {\r\n bounds.extend(place.marker.getPosition());\r\n }\r\n widget.map.fitBounds(bounds, \/* padding= *\/ 100);\r\n };\r\n\r\n \/\/ Marker used to highlight a place from Autocomplete search.\r\n widget.selectedPlaceMarker = new google.maps.Marker({title: 'Point of Interest'});\r\n }\r\n\r\n \/** Initializes Place Details service for the widget. *\/\r\n function initializePlaceDetails() {\r\n const detailsService = new google.maps.places.PlacesService(widget.map);\r\n const placeIdsToDetails = new Map(); \/\/ Create object to hold Place results.\r\n\r\n for (let place of widget.places) {\r\n placeIdsToDetails.set(place.placeId, place);\r\n place.fetchedFields = new Set(['place_id']);\r\n }\r\n\r\n widget.fetchPlaceDetails = function(placeId, fields, callback) {\r\n if (!placeId || !fields) return;\r\n\r\n \/\/ Check for field existence in Place object.\r\n let place = placeIdsToDetails.get(placeId);\r\n if (!place) {\r\n place = {placeId: placeId, fetchedFields: new Set(['place_id'])};\r\n placeIdsToDetails.set(placeId, place);\r\n }\r\n const missingFields = fields.filter((field) => !place.fetchedFields.has(field));\r\n if (missingFields.length === 0) {\r\n callback(place);\r\n return;\r\n }\r\n\r\n const request = {placeId: placeId, fields: missingFields};\r\n let retryCount = 0;\r\n const processResult = function(result, status) {\r\n if (status !== google.maps.places.PlacesServiceStatus.OK) {\r\n \/\/ If query limit has been reached, wait before making another call;\r\n \/\/ Increase wait time of each successive retry with exponential backoff\r\n \/\/ and terminate after five failed attempts.\r\n if (status === google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT &&\r\n retryCount < 5) {\r\n const delay = (Math.pow(2, retryCount) + Math.random()) * 500;\r\n setTimeout(() => void detailsService.getDetails(request, processResult), delay);\r\n retryCount++;\r\n }\r\n return;\r\n }\r\n\r\n \/\/ Basic details.\r\n if (result.name) place.name = result.name;\r\n if (result.geometry) place.coords = result.geometry.location;\r\n if (result.formatted_address) place.address = result.formatted_address;\r\n if (result.photos) {\r\n place.photos = result.photos.map((photo) => ({\r\n urlSmall: photo.getUrl({maxWidth: 200, maxHeight: 200}),\r\n urlLarge: photo.getUrl({maxWidth: 1200, maxHeight: 1200}),\r\n attrs: photo.html_attributions,\r\n })).slice(0, ND_NUM_PLACE_PHOTOS_MAX);\r\n }\r\n if (result.types) {\r\n place.type = formatPlaceType(result.types[0]);\r\n place.icon = ND_MARKER_ICONS_BY_TYPE['_default'];\r\n for (let type of result.types) {\r\n if (type in ND_MARKER_ICONS_BY_TYPE) {\r\n place.type = formatPlaceType(type);\r\n place.icon = ND_MARKER_ICONS_BY_TYPE[type];\r\n break;\r\n }\r\n }\r\n }\r\n if (result.url) place.url = result.url;\r\n\r\n \/\/ Contact details.\r\n if (result.website) {\r\n place.website = result.website;\r\n const url = new URL(place.website);\r\n place.websiteDomain = url.hostname;\r\n }\r\n if (result.formatted_phone_number) place.phoneNumber = result.formatted_phone_number;\r\n if (result.opening_hours) place.openingHours = parseDaysHours(result.opening_hours);\r\n\r\n for (let field of missingFields) {\r\n place.fetchedFields.add(field);\r\n }\r\n callback(place);\r\n };\r\n\r\n \/\/ Use result from Place Autocomplete if available.\r\n if (widget.placeIdsToAutocompleteResults) {\r\n const autoCompleteResult = widget.placeIdsToAutocompleteResults.get(placeId);\r\n if (autoCompleteResult) {\r\n processResult(autoCompleteResult, google.maps.places.PlacesServiceStatus.OK);\r\n return;\r\n }\r\n }\r\n detailsService.getDetails(request, processResult);\r\n };\r\n }\r\n\r\n \/** Initializes the side panel that holds curated POI results. *\/\r\n function initializeSidePanel() {\r\n const placesPanelEl = widgetEl.querySelector('.places-panel');\r\n const detailsPanelEl = widgetEl.querySelector('.details-panel');\r\n const placeResultsEl = widgetEl.querySelector('.place-results-list');\r\n const showMoreButtonEl = widgetEl.querySelector('.show-more-button');\r\n const photoModalEl = widgetEl.querySelector('.photo-modal');\r\n const detailsTemplate = Handlebars.compile(\r\n document.getElementById('nd-place-details-tmpl').innerHTML);\r\n const resultsTemplate = Handlebars.compile(\r\n document.getElementById('nd-place-results-tmpl').innerHTML);\r\n\r\n \/\/ Show specified POI photo in a modal.\r\n const showPhotoModal = function(photo, placeName) {\r\n const prevFocusEl = document.activeElement;\r\n const imgEl = photoModalEl.querySelector('img');\r\n imgEl.src = photo.urlLarge;\r\n const backButtonEl = photoModalEl.querySelector('.back-button');\r\n backButtonEl.addEventListener('click', () => {\r\n hideElement(photoModalEl, prevFocusEl);\r\n imgEl.src = '';\r\n });\r\n photoModalEl.querySelector('.photo-place').innerHTML = placeName;\r\n photoModalEl.querySelector('.photo-attrs span').innerHTML = photo.attrs;\r\n const attributionEl = photoModalEl.querySelector('.photo-attrs a');\r\n if (attributionEl) attributionEl.setAttribute('target', '_blank');\r\n photoModalEl.addEventListener('click', (e) => {\r\n if (e.target === photoModalEl) {\r\n hideElement(photoModalEl, prevFocusEl);\r\n imgEl.src = '';\r\n }\r\n });\r\n showElement(photoModalEl, backButtonEl);\r\n };\r\n\r\n \/\/ Select a place by id and show details.\r\n let selectedPlaceId;\r\n widget.selectPlaceById = function(placeId, panToMarker) {\r\n if (selectedPlaceId === placeId) return;\r\n selectedPlaceId = placeId;\r\n const prevFocusEl = document.activeElement;\r\n\r\n const showDetailsPanel = function(place) {\r\n detailsPanelEl.innerHTML = detailsTemplate(place);\r\n const backButtonEl = detailsPanelEl.querySelector('.back-button');\r\n backButtonEl.addEventListener('click', () => {\r\n hideElement(detailsPanelEl, prevFocusEl);\r\n selectedPlaceId = undefined;\r\n widget.updateDirections();\r\n widget.selectedPlaceMarker.setMap(null);\r\n });\r\n detailsPanelEl.querySelectorAll('.photo').forEach((photoEl, i) => {\r\n photoEl.addEventListener('click', () => {\r\n showPhotoModal(place.photos[i], place.name);\r\n });\r\n });\r\n showElement(detailsPanelEl, backButtonEl);\r\n detailsPanelEl.scrollTop = 0;\r\n };\r\n\r\n const processResult = function(place) {\r\n if (place.marker) {\r\n widget.selectedPlaceMarker.setMap(null);\r\n } else {\r\n widget.selectedPlaceMarker.setPosition(place.coords);\r\n widget.selectedPlaceMarker.setMap(widget.map);\r\n }\r\n if (panToMarker) {\r\n widget.map.panTo(place.coords);\r\n }\r\n showDetailsPanel(place);\r\n widget.fetchDuration(place, showDetailsPanel);\r\n widget.updateDirections(place);\r\n };\r\n\r\n widget.fetchPlaceDetails(placeId, [\r\n 'name', 'types', 'geometry.location', 'formatted_address', 'photo', 'url',\r\n 'website', 'formatted_phone_number', 'opening_hours',\r\n ], processResult);\r\n };\r\n\r\n \/\/ Render the specified place objects and append them to the POI list.\r\n const renderPlaceResults = function(places, startIndex) {\r\n placeResultsEl.insertAdjacentHTML('beforeend', resultsTemplate({places: places}));\r\n placeResultsEl.querySelectorAll('.place-result').forEach((resultEl, i) => {\r\n const place = places[i - startIndex];\r\n if (!place) return;\r\n \/\/ Clicking anywhere on the item selects the place.\r\n \/\/ Additionally, create a button element to make this behavior\r\n \/\/ accessible under tab navigation.\r\n resultEl.addEventListener('click', () => {\r\n widget.selectPlaceById(place.placeId, \/* panToMarker= *\/ true);\r\n });\r\n resultEl.querySelector('.name').addEventListener('click', (e) => {\r\n widget.selectPlaceById(place.placeId, \/* panToMarker= *\/ true);\r\n e.stopPropagation();\r\n });\r\n resultEl.querySelector('.photo').addEventListener('click', (e) => {\r\n showPhotoModal(place.photos[0], place.name);\r\n e.stopPropagation();\r\n });\r\n widget.addPlaceMarker(place);\r\n });\r\n };\r\n\r\n \/\/ Index of next Place object to show in the POI list.\r\n let nextPlaceIndex = 0;\r\n\r\n \/\/ Fetch and show basic info for the next N places.\r\n const showNextPlaces = function(n) {\r\n const nextPlaces = widget.places.slice(nextPlaceIndex, nextPlaceIndex + n);\r\n if (nextPlaces.length < 1) {\r\n hideElement(showMoreButtonEl);\r\n return;\r\n }\r\n showMoreButtonEl.disabled = true;\r\n \/\/ Keep track of the number of Places calls that have not finished.\r\n let count = nextPlaces.length;\r\n for (let place of nextPlaces) {\r\n const processResult = function(place) {\r\n count--;\r\n if (count > 0) return;\r\n renderPlaceResults(nextPlaces, nextPlaceIndex);\r\n nextPlaceIndex += n;\r\n widget.updateBounds(widget.places.slice(0, nextPlaceIndex));\r\n const hasMorePlacesToShow = nextPlaceIndex < widget.places.length;\r\n if (hasMorePlacesToShow || hasHiddenContent(placesPanelEl)) {\r\n showElement(showMoreButtonEl);\r\n showMoreButtonEl.disabled = false;\r\n } else {\r\n hideElement(showMoreButtonEl);\r\n }\r\n };\r\n widget.fetchPlaceDetails(place.placeId, [\r\n 'name', 'types', 'geometry.location',\r\n 'photo',\r\n ], processResult);\r\n }\r\n };\r\n showNextPlaces(ND_NUM_PLACES_INITIAL);\r\n\r\n showMoreButtonEl.addEventListener('click', () => {\r\n placesPanelEl.classList.remove('no-scroll');\r\n showMoreButtonEl.classList.remove('sticky');\r\n showNextPlaces(ND_NUM_PLACES_SHOW_MORE);\r\n });\r\n }\r\n\r\n \/** Initializes Search Input for the widget. *\/\r\n function initializeSearchInput() {\r\n const searchInputEl = widgetEl.querySelector('.place-search-input');\r\n widget.placeIdsToAutocompleteResults = new Map();\r\n\r\n \/\/ Set up Autocomplete on the search input.\r\n const autocomplete = new google.maps.places.Autocomplete(searchInputEl, {\r\n types: ['establishment'],\r\n fields: [\r\n 'place_id', 'name', 'types', 'geometry.location', 'formatted_address', 'photo', 'url',\r\n 'website', 'formatted_phone_number', 'opening_hours',\r\n ],\r\n bounds: widget.mapBounds,\r\n strictBounds: true,\r\n });\r\n autocomplete.addListener('place_changed', () => {\r\n const place = autocomplete.getPlace();\r\n widget.placeIdsToAutocompleteResults.set(place.place_id, place);\r\n widget.selectPlaceById(place.place_id, \/* panToMarker= *\/ true);\r\n searchInputEl.value = '';\r\n });\r\n }\r\n\r\n \/** Initializes Distance Matrix service for the widget. *\/\r\n function initializeDistanceMatrix() {\r\n const distanceMatrixService = new google.maps.DistanceMatrixService();\r\n\r\n \/\/ Annotate travel times from the centered location to the specified place.\r\n widget.fetchDuration = function(place, callback) {\r\n if (!widget.center || !place || !place.coords || place.duration) return;\r\n const request = {\r\n origins: [widget.center],\r\n destinations: [place.coords],\r\n travelMode: google.maps.TravelMode.DRIVING,\r\n };\r\n distanceMatrixService.getDistanceMatrix(request, function(result, status) {\r\n if (status === google.maps.DistanceMatrixStatus.OK) {\r\n const trip = result.rows[0].elements[0];\r\n if (trip.status === google.maps.DistanceMatrixElementStatus.OK) {\r\n place.duration = trip.duration;\r\n callback(place);\r\n }\r\n }\r\n });\r\n };\r\n }\r\n\r\n \/** Initializes Directions service for the widget. *\/\r\n function initializeDirections() {\r\n const directionsService = new google.maps.DirectionsService();\r\n const directionsRenderer = new google.maps.DirectionsRenderer({\r\n suppressMarkers: true,\r\n preserveViewport: true,\r\n });\r\n\r\n \/\/ Update directions from the centered location to specified place.\r\n widget.updateDirections = function(place) {\r\n if (!widget.center || !place || !place.coords) {\r\n directionsRenderer.setMap(null);\r\n return;\r\n }\r\n \/\/ Use existing results if available.\r\n if (place.directions) {\r\n directionsRenderer.setMap(widget.map);\r\n directionsRenderer.setDirections(place.directions);\r\n return;\r\n }\r\n const request = {\r\n origin: widget.center,\r\n destination: place.coords,\r\n travelMode: google.maps.TravelMode.DRIVING,\r\n };\r\n directionsService.route(request, function(result, status) {\r\n if (status === google.maps.DirectionsStatus.OK) {\r\n place.directions = result;\r\n directionsRenderer.setMap(widget.map);\r\n directionsRenderer.setDirections(result);\r\n }\r\n });\r\n };\r\n }\r\n }\r\n <\/script>\r\n <script>\r\n const CONFIGURATION = {\r\n \"capabilities\": {\"search\":true,\"distances\":true,\"directions\":true,\"contacts\":true,\"atmospheres\":false,\"thumbnails\":true},\r\n \"pois\": [\r\n {\"placeId\": \"ChIJtQ2EYjng54kR0fFf5J-LIKs\"},\r\n {\"placeId\": \"ChIJo9eQm8zh54kRz26ool01c58\"},\r\n {\"placeId\": \"ChIJVVuK_CTg54kRtBjmIsha6cM\"},\r\n {\"placeId\": \"ChIJAUlvppnh54kR_1my5_BEPv0\"},\r\n {\"placeId\": \"ChIJkSHYi3rh54kRSHAYwMC6OII\"},\r\n {\"placeId\": \"ChIJB2uobQDh54kRGEVtsoZsJds\"},\r\n {\"placeId\": \"ChIJ6auJ1srh54kRwsO0kAyAMqQ\"},\r\n {\"placeId\": \"ChIJZQOkmVjh54kRMKFCqrEf1Bc\"}\r\n ],\r\n \"centerMarker\": {\"icon\":\"circle\"},\r\n \"mapRadius\": 2000,\r\n \"mapOptions\": {\"center\":{\"lat\":41.31375999999999,\"lng\":-73.1374318},\"fullscreenControl\":true,\"mapTypeControl\":true,\"streetViewControl\":false,\"zoom\":16,\"zoomControl\":true,\"maxZoom\":20,\"mapId\":\"\"},\r\n \"mapsApiKey\": \"AIzaSyBu267A7XyCWjA121DykZn01Ef2_Dwlbkw\"\r\n };\r\n\r\n function initMap() {\r\n new NeighborhoodDiscovery(CONFIGURATION);\r\n }\r\n <\/script>\r\n <script id=\"nd-place-results-tmpl\" type=\"text\/x-handlebars-template\">\r\n {{#each places}}\r\n <li class=\"place-result\">\r\n <div class=\"text\">\r\n <button class=\"name\">{{name}}<\/button>\r\n <div class=\"info\">{{type}}<\/div>\r\n <\/div>\r\n <button class=\"photo\" style=\"background-image:url({{photos.0.urlSmall}})\" aria-label=\"show photo in viewer\"><\/button>\r\n <\/li>\r\n {{\/each}}\r\n <\/script>\r\n <script id=\"nd-place-details-tmpl\" type=\"text\/x-handlebars-template\">\r\n <div class=\"navbar\">\r\n <button class=\"back-button\">\r\n <img decoding=\"async\" class=\"icon\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/arrow_back\/v11\/24px.svg\" alt=\"back\"\/>\r\n Back\r\n <\/button>\r\n <\/div>\r\n <header>\r\n <h2>{{name}}<\/h2>\r\n <div class=\"info\">\r\n <a href=\"{{url}}\" target=\"_blank\">See on Google Maps<\/a>\r\n <\/div>\r\n {{#if type}}\r\n <div class=\"info\">{{type}}<\/div>\r\n {{\/if}}\r\n {{#if duration}}\r\n <div class=\"info\">\r\n <img decoding=\"async\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/directions_car\/v11\/24px.svg\" alt=\"car travel\" class=\"travel-icon\"\/>\r\n <span> {{duration.text}}<\/span>\r\n <\/div>\r\n {{\/if}}\r\n <\/header>\r\n <div class=\"section\">\r\n {{#if address}}\r\n <div class=\"contact\">\r\n <img decoding=\"async\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/place\/v10\/24px.svg\" alt=\"Address\" class=\"icon\"\/>\r\n <div class=\"text\">\r\n {{address}}\r\n <\/div>\r\n <\/div>\r\n {{\/if}}\r\n {{#if website}}\r\n <div class=\"contact\">\r\n <img decoding=\"async\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/public\/v10\/24px.svg\" alt=\"Website\" class=\"icon\"\/>\r\n <div class=\"text\">\r\n <a href=\"{{website}}\" target=\"_blank\">{{websiteDomain}}<\/a>\r\n <\/div>\r\n <\/div>\r\n {{\/if}}\r\n {{#if phoneNumber}}\r\n <div class=\"contact\">\r\n <img decoding=\"async\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/phone\/v10\/24px.svg\" alt=\"Phone number\" class=\"icon\"\/>\r\n <div class=\"text\">\r\n {{phoneNumber}}\r\n <\/div>\r\n <\/div>\r\n {{\/if}}\r\n {{#if openingHours}}\r\n <div class=\"contact\">\r\n <img decoding=\"async\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/schedule\/v12\/24px.svg\" alt=\"Opening hours\" class=\"icon\"\/>\r\n <div class=\"text\">\r\n {{#each openingHours}}\r\n <div>\r\n <span class=\"weekday\">{{days}}<\/span>\r\n <span class=\"hours\">{{hours}}<\/span>\r\n <\/div>\r\n {{\/each}}\r\n <\/div>\r\n <\/div>\r\n {{\/if}}\r\n <\/div>\r\n {{#if photos}}\r\n <div class=\"photos section\">\r\n {{#each photos}}\r\n <button class=\"photo\" style=\"background-image:url({{urlLarge}})\" aria-label=\"show photo in viewer\"><\/button>\r\n {{\/each}}\r\n <\/div>\r\n {{\/if}}\r\n {{#if html_attributions}}\r\n <div class=\"section\">\r\n {{#each html_attributions}}\r\n <p class=\"attribution\">{{{this}}}<\/p>\r\n {{\/each}}\r\n <\/div>\r\n {{\/if}}\r\n <\/script>\r\n <\/head>\r\n <body>\r\n <div class=\"neighborhood-discovery\">\r\n <div class=\"places-panel panel no-scroll\">\r\n <header class=\"navbar\">\r\n <div class=\"search-input\">\r\n <input class=\"place-search-input\" placeholder=\"Search nearby places\">\r\n <button class=\"place-search-button\">\r\n <img decoding=\"async\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/search\/v11\/24px.svg\" alt=\"search\"\/>\r\n <\/button>\r\n <\/div>\r\n <\/header>\r\n <div class=\"results\">\r\n <ul class=\"place-results-list\"><\/ul>\r\n <\/div>\r\n <button class=\"show-more-button sticky\">\r\n <span>Show More<\/span>\r\n <img decoding=\"async\" class=\"right\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/expand_more\/v11\/24px.svg\" alt=\"expand\"\/>\r\n <\/button>\r\n <\/div>\r\n <div class=\"details-panel panel\"><\/div>\r\n <div class=\"map\"><\/div>\r\n <div class=\"photo-modal\">\r\n <img alt=\"place photo\"\/>\r\n <div>\r\n <button class=\"back-button\">\r\n <img decoding=\"async\" class=\"icon\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/arrow_back\/v11\/24px.svg\" alt=\"back\"\/>\r\n <\/button>\r\n <div class=\"photo-text\">\r\n <div class=\"photo-place\"><\/div>\r\n <div class=\"photo-attrs\">Photo by <span><\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <svg class=\"marker-pin\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"26\" height=\"38\" fill=\"none\">\r\n <path d=\"M13 0C5.817 0 0 5.93 0 13.267c0 7.862 5.59 10.81 9.555 17.624C12.09 35.248 11.342 38 13 38c1.723 0 .975-2.817 3.445-7.043C20.085 24.503 26 21.162 26 13.267 26 5.93 20.183 0 13 0Z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBu267A7XyCWjA121DykZn01Ef2_Dwlbkw&callback=initMap&libraries=places,geometry&solution_channel=GMP_QB_neighborhooddiscovery_v3_cABCDF\" async defer><\/script>\r\n <\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3290106 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"3290106\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-157de6e elementor-widget elementor-widget-heading\" data-id=\"157de6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Direction Map<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a84d887 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"a84d887\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9657586 elementor-widget elementor-widget-html\" data-id=\"9657586\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>Locator<\/title>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\r\n <style>\r\n html,\r\n body {\r\n height: 100%;\r\n margin: 0;\r\n }\r\n\r\n gmpx-store-locator {\r\n width: 1140px; \/* Set the width *\/\r\n height: 400px; \/* Set the height *\/\r\n\r\n \/* The rest of your existing styles *\/\r\n --gmpx-color-surface: #fff;\r\n --gmpx-color-on-surface: #212121;\r\n --gmpx-color-on-surface-variant: #757575;\r\n --gmpx-color-primary: #1967d2;\r\n --gmpx-color-outline: #e0e0e0;\r\n --gmpx-fixed-panel-width-row-layout: 28.5em;\r\n --gmpx-fixed-panel-height-column-layout: 65%;\r\n --gmpx-font-family-base: \"Roboto\", sans-serif;\r\n --gmpx-font-family-headings: \"Roboto\", sans-serif;\r\n --gmpx-font-size-base: 0.875rem;\r\n --gmpx-hours-color-open: #188038;\r\n --gmpx-hours-color-closed: #d50000;\r\n --gmpx-rating-color: #ffb300;\r\n --gmpx-rating-color-empty: #e0e0e0;\r\n}\r\n\r\n <\/style>\r\n <script>\r\n const CONFIGURATION = {\r\n \"locations\": [\r\n {\"title\":\"Creative Home Improvement LLC\",\"address1\":\"37 Commodore Avenue\",\"address2\":\"Shelton, CT, United States\",\"coords\":{\"lat\":41.3136877,\"lng\":-73.1375075},\"placeId\":\"ChIJo9eQm8zh54kRz26ool01c58\"}\r\n ],\r\n \"mapOptions\": {\"center\":{\"lat\":38.0,\"lng\":-100.0},\"fullscreenControl\":true,\"mapTypeControl\":false,\"streetViewControl\":false,\"zoom\":4,\"zoomControl\":true,\"maxZoom\":17,\"mapId\":\"\"},\r\n \"mapsApiKey\": \"AIzaSyAmagK2k-JEVFJNmB6MwukTCo_uyWrBD6A\",\r\n \"capabilities\": {\"input\":true,\"autocomplete\":true,\"directions\":false,\"distanceMatrix\":true,\"details\":false,\"actions\":false}\r\n };\r\n\r\n <\/script>\r\n <script type=\"module\">\r\n document.addEventListener('DOMContentLoaded', async () => {\r\n await customElements.whenDefined('gmpx-store-locator');\r\n const locator = document.querySelector('gmpx-store-locator');\r\n locator.configureFromQuickBuilder(CONFIGURATION);\r\n });\r\n <\/script>\r\n <\/head>\r\n <body>\r\n <script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/@googlemaps\/extended-component-library\/0.6.11\/index.min.js\"><\/script>\r\n\r\n \r\n <gmpx-api-loader key=\"AIzaSyAmagK2k-JEVFJNmB6MwukTCo_uyWrBD6A\" solution-channel=\"GMP_QB_locatorplus_v11_cABD\"><\/gmpx-api-loader>\r\n <gmpx-store-locator map-id=\"DEMO_MAP_ID\"><\/gmpx-store-locator>\r\n <\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c5327f2 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"c5327f2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b08bd5e elementor-widget elementor-widget-heading\" data-id=\"b08bd5e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Place auto complete<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2213261 elementor-widget elementor-widget-html\" data-id=\"2213261\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n <head>\r\n <title>Place Autocomplete<\/title>\r\n <script>\r\n \/**\r\n * @license\r\n * Copyright 2024 Google LLC. All Rights Reserved.\r\n * SPDX-License-Identifier: Apache-2.0\r\n *\/\r\n async function init() {\r\n await customElements.whenDefined('gmp-map');\r\n\r\n const map = document.querySelector(\"gmp-map\");\r\n const marker = document.getElementById(\"marker\");\r\n const strictBoundsInputElement = document.getElementById(\"use-strict-bounds\");\r\n const placePicker = document.getElementById(\"place-picker\");\r\n const infowindowContent = document.getElementById(\"infowindow-content\");\r\n const infowindow = new google.maps.InfoWindow();\r\n\r\n map.innerMap.setOptions({mapTypeControl: false});\r\n infowindow.setContent(infowindowContent);\r\n\r\n placePicker.addEventListener('gmpx-placechange', () => {\r\n const place = placePicker.value;\r\n\r\n if (!place.location) {\r\n window.alert(\r\n \"No details available for input: '\" + place.name + \"'\"\r\n );\r\n infowindow.close();\r\n marker.position = null;\r\n return;\r\n }\r\n\r\n if (place.viewport) {\r\n map.innerMap.fitBounds(place.viewport);\r\n } else {\r\n map.center = place.location;\r\n map.zoom = 17;\r\n }\r\n\r\n marker.position = place.location;\r\n infowindowContent.children[\"place-name\"].textContent = place.displayName;\r\n infowindowContent.children[\"place-address\"].textContent = place.formattedAddress;\r\n infowindow.open(map.innerMap, marker);\r\n });\r\n\r\n \/\/ Sets a listener on a radio button to change the filter type on the place picker\r\n function setupClickListener(id, type) {\r\n const radioButton = document.getElementById(id);\r\n radioButton.addEventListener(\"click\", () => {\r\n placePicker.type = type;\r\n });\r\n }\r\n setupClickListener(\"changetype-all\", \"\");\r\n setupClickListener(\"changetype-address\", \"address\");\r\n setupClickListener(\"changetype-establishment\", \"establishment\");\r\n setupClickListener(\"changetype-geocode\", \"geocode\");\r\n setupClickListener(\"changetype-cities\", \"(cities)\");\r\n setupClickListener(\"changetype-regions\", \"(regions)\");\r\n\r\n strictBoundsInputElement.addEventListener(\"change\", () => {\r\n placePicker.strictBounds = strictBoundsInputElement.checked;\r\n });\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', init);\r\n <\/script>\r\n <style>\r\n \/**\r\n * @license\r\n * Copyright 2024 Google LLC. All Rights Reserved.\r\n * SPDX-License-Identifier: Apache-2.0\r\n *\/\r\n\r\n \/*\r\n * Optional: Makes the sample page fill the window.\r\n *\/\r\n html, body {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/*\r\n * Prevent a flash of unstyled content before the custom element is defined.\r\n *\/\r\n gmp-map {\r\n height: 400px; \/* Example fixed height *\/\r\n width: 1140px; \/* Example full width *\/\r\n \/* Or if you want it to fill its parent: *\/\r\n \/* height: 100%; *\/\r\n \/* width: 100%; *\/\r\n display: block; \/* Custom elements sometimes need this *\/\r\n}\r\n #infowindow-content {\r\n display: none;\r\n }\r\n\r\n .pac-card {\r\n background-color: #fff;\r\n border-radius: 2px;\r\n box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);\r\n margin: 10px;\r\n font: 400 18px Roboto, Arial, sans-serif;\r\n overflow: hidden;\r\n }\r\n\r\n .pac-controls {\r\n display: inline-block;\r\n padding: 5px 11px;\r\n }\r\n\r\n .pac-controls label {\r\n font-size: 13px;\r\n font-weight: 300;\r\n }\r\n\r\n #place-picker {\r\n box-sizing: border-box;\r\n width: 100%;\r\n padding: 0.5rem 1rem 1rem;\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n \r\n <script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/@googlemaps\/extended-component-library\/0.6.11\/index.min.js\">\r\n <\/script>\r\n <gmpx-api-loader\r\n key=\"AIzaSyCxVIjzQx3yOqQlUWLl3wmF6aXc5lp-_b4\"\r\n solution-channel=\"GMP_CCS_autocomplete_v5\">\r\n <\/gmpx-api-loader>\r\n <gmp-map id=\"map\" center=\"40.749933,-73.98633\" zoom=\"13\" map-id=\"DEMO_MAP_ID\">\r\n <div slot=\"control-block-start-inline-start\" class=\"pac-card\" id=\"pac-card\">\r\n <div>\r\n <div id=\"title\">Autocomplete search<\/div>\r\n <div id=\"type-selector\" class=\"pac-controls\">\r\n <input type=\"radio\" name=\"type\" id=\"changetype-all\" checked=\"checked\" \/>\r\n <label for=\"changetype-all\">All<\/label>\r\n\r\n <input type=\"radio\" name=\"type\" id=\"changetype-establishment\" \/>\r\n <label for=\"changetype-establishment\">establishment<\/label>\r\n\r\n <input type=\"radio\" name=\"type\" id=\"changetype-address\" \/>\r\n <label for=\"changetype-address\">address<\/label>\r\n\r\n <input type=\"radio\" name=\"type\" id=\"changetype-geocode\" \/>\r\n <label for=\"changetype-geocode\">geocode<\/label>\r\n\r\n <input type=\"radio\" name=\"type\" id=\"changetype-cities\" \/>\r\n <label for=\"changetype-cities\">(cities)<\/label>\r\n\r\n <input type=\"radio\" name=\"type\" id=\"changetype-regions\" \/>\r\n <label for=\"changetype-regions\">(regions)<\/label>\r\n <\/div>\r\n <br \/>\r\n <div id=\"strict-bounds-selector\" class=\"pac-controls\">\r\n <input type=\"checkbox\" id=\"use-strict-bounds\" value=\"\" \/>\r\n <label for=\"use-strict-bounds\">Restrict to map viewport<\/label>\r\n <\/div>\r\n <\/div>\r\n <gmpx-place-picker id=\"place-picker\" for-map=\"map\"><\/gmpx-place-picker>\r\n <\/div>\r\n <gmp-advanced-marker id=\"marker\"><\/gmp-advanced-marker>\r\n <\/gmp-map>\r\n <div id=\"infowindow-content\">\r\n <span id=\"place-name\" class=\"title\" style=\"font-weight: bold;\"><\/span><br \/>\r\n <span id=\"place-address\"><\/span>\r\n <\/div>\r\n <\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-03c7439 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"03c7439\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35a67d7 elementor-widget elementor-widget-heading\" data-id=\"35a67d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Autocomplete Address<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6eea79a elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"6eea79a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7442439 elementor-widget elementor-widget-html\" data-id=\"7442439\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>Address Selection<\/title>\r\n <style>\r\n body {\r\n margin: 0;\r\n }\r\n\r\n .sb-title {\r\n position: relative;\r\n top: -12px;\r\n font-family: Roboto, sans-serif;\r\n font-weight: 500;\r\n }\r\n\r\n .sb-title-icon {\r\n position: relative;\r\n top: -5px;\r\n }\r\n\r\n gmpx-split-layout {\r\n height: 500px;\r\n width: 1140px;\r\n }\r\n\r\n gmpx-split-layout:not(:defined) {\r\n visibility: hidden;\r\n }\r\n\r\n .panel {\r\n background: white;\r\n box-sizing: border-box;\r\n height: 100%;\r\n width: 100%;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n }\r\n\r\n .half-input-container {\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n\r\n .half-input {\r\n max-width: 120px;\r\n }\r\n\r\n h2 {\r\n margin: 0;\r\n font-family: Roboto, sans-serif;\r\n }\r\n\r\n input {\r\n height: 30px;\r\n }\r\n\r\n input {\r\n border: 0;\r\n border-bottom: 1px solid black;\r\n font-size: 14px;\r\n font-family: Roboto, sans-serif;\r\n font-style: normal;\r\n font-weight: normal;\r\n }\r\n\r\n input:focus::placeholder {\r\n color: white;\r\n }\r\n <\/style>\r\n <script type=\"module\">\r\n \"use strict\";\r\n\r\n \/\/ This loads helper components from the Extended Component Library,\r\n \/\/ https:\/\/github.com\/googlemaps\/extended-component-library.\r\n import {APILoader} from 'https:\/\/ajax.googleapis.com\/ajax\/libs\/@googlemaps\/extended-component-library\/0.6.11\/index.min.js';\r\n\r\n const CONFIGURATION = {\r\n \"ctaTitle\": \"Get Free Quote\",\r\n \"mapOptions\": {\"center\":{\"lat\":37.4221,\"lng\":-122.0841},\"fullscreenControl\":true,\"mapTypeControl\":false,\"streetViewControl\":true,\"zoom\":11,\"zoomControl\":true,\"maxZoom\":22,\"mapId\":\"\"},\r\n \"mapsApiKey\": \"AIzaSyAmagK2k-JEVFJNmB6MwukTCo_uyWrBD6A\",\r\n \"capabilities\": {\"addressAutocompleteControl\":true,\"mapDisplayControl\":true,\"ctaControl\":true}\r\n };\r\n\r\n const SHORT_NAME_ADDRESS_COMPONENT_TYPES =\r\n new Set(['street_number', 'administrative_area_level_1', 'postal_code']);\r\n\r\n const ADDRESS_COMPONENT_TYPES_IN_FORM = [\r\n 'location',\r\n 'locality',\r\n 'administrative_area_level_1',\r\n 'postal_code',\r\n 'country',\r\n ];\r\n\r\n function getFormInputElement(componentType) {\r\n return document.getElementById(`${componentType}-input`);\r\n }\r\n\r\n function fillInAddress(place) {\r\n function getComponentName(componentType) {\r\n for (const component of place.address_components || []) {\r\n if (component.types[0] === componentType) {\r\n return SHORT_NAME_ADDRESS_COMPONENT_TYPES.has(componentType) ?\r\n component.short_name :\r\n component.long_name;\r\n }\r\n }\r\n return '';\r\n }\r\n\r\n function getComponentText(componentType) {\r\n return (componentType === 'location') ?\r\n `${getComponentName('street_number')} ${getComponentName('route')}` :\r\n getComponentName(componentType);\r\n }\r\n\r\n for (const componentType of ADDRESS_COMPONENT_TYPES_IN_FORM) {\r\n getFormInputElement(componentType).value = getComponentText(componentType);\r\n }\r\n }\r\n\r\n function renderAddress(place) {\r\n const mapEl = document.querySelector('gmp-map');\r\n const markerEl = document.querySelector('gmp-advanced-marker');\r\n\r\n if (place.geometry && place.geometry.location) {\r\n mapEl.center = place.geometry.location;\r\n markerEl.position = place.geometry.location;\r\n } else {\r\n markerEl.position = null;\r\n }\r\n }\r\n\r\n async function initMap() {\r\n const {Autocomplete} = await APILoader.importLibrary('places');\r\n\r\n const mapOptions = CONFIGURATION.mapOptions;\r\n mapOptions.mapId = mapOptions.mapId || 'DEMO_MAP_ID';\r\n mapOptions.center = mapOptions.center || {lat: 37.4221, lng: -122.0841};\r\n\r\n await customElements.whenDefined('gmp-map');\r\n document.querySelector('gmp-map').innerMap.setOptions(mapOptions);\r\n const autocomplete = new Autocomplete(getFormInputElement('location'), {\r\n fields: ['address_components', 'geometry', 'name'],\r\n types: ['address'],\r\n });\r\n\r\n autocomplete.addListener('place_changed', () => {\r\n const place = autocomplete.getPlace();\r\n if (!place.geometry) {\r\n \/\/ User entered the name of a Place that was not suggested and\r\n \/\/ pressed the Enter key, or the Place Details request failed.\r\n window.alert(`No details available for input: '${place.name}'`);\r\n return;\r\n }\r\n renderAddress(place);\r\n fillInAddress(place);\r\n });\r\n }\r\n\r\n initMap();\r\n <\/script>\r\n <\/head>\r\n <body>\r\n <gmpx-api-loader key=\"AIzaSyCxVIjzQx3yOqQlUWLl3wmF6aXc5lp-_b4\" solution-channel=\"GMP_QB_addressselection_v4_cABC\">\r\n <\/gmpx-api-loader>\r\n <gmpx-split-layout row-layout-min-width=\"600\">\r\n <div class=\"panel\" slot=\"fixed\">\r\n <div>\r\n <img decoding=\"async\" class=\"sb-title-icon\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/location_pin\/v5\/24px.svg\" alt=\"\">\r\n <span class=\"sb-title\">Address Selection<\/span>\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Address\" id=\"location-input\"\/>\r\n <input type=\"text\" placeholder=\"Apt, Suite, etc (optional)\"\/>\r\n <input type=\"text\" placeholder=\"City\" id=\"locality-input\"\/>\r\n <div class=\"half-input-container\">\r\n <input type=\"text\" class=\"half-input\" placeholder=\"State\/Province\" id=\"administrative_area_level_1-input\"\/>\r\n <input type=\"text\" class=\"half-input\" placeholder=\"Zip\/Postal code\" id=\"postal_code-input\"\/>\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Country\" id=\"country-input\"\/>\r\n <gmpx-icon-button variant=\"filled\">Get Free Quote<\/gmpx-icon-button>\r\n <\/div>\r\n <gmp-map slot=\"main\">\r\n <gmp-advanced-marker><\/gmp-advanced-marker>\r\n <\/gmp-map>\r\n <\/gmpx-split-layout>\r\n <\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8cc112b elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"8cc112b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-03d4c7f elementor-widget elementor-widget-heading\" data-id=\"03d4c7f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add direction to your website<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8294630 elementor-widget elementor-widget-html\" data-id=\"8294630\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <title>Commutes and Destinations Map<\/title>\r\n <meta charset=\"utf-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\r\n <style>\r\n html,\r\n body {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n .commutes {\r\n align-content: stretch;\r\n color: #202124;\r\n display: flex;\r\n flex-direction: column;\r\n flex-wrap: wrap;\r\n font-family: Arial, sans-serif;\r\n height: 100%;\r\n min-height: 256px;\r\n min-width: 360px;\r\n overflow: auto;\r\n width: 100%;\r\n }\r\n\r\n .commutes-info {\r\n flex: 0 0 110px;\r\n max-width: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n .commutes-initial-state {\r\n border-radius: 8px;\r\n border: 1px solid #dadce0;\r\n display: flex;\r\n height: 98px;\r\n margin-top: 8px;\r\n padding: 0 16px;\r\n }\r\n\r\n .commutes-initial-state svg {\r\n align-self: center;\r\n }\r\n\r\n .commutes-initial-state .description {\r\n align-self: center;\r\n flex-grow: 1;\r\n padding: 0 16px;\r\n }\r\n\r\n .commutes-initial-state .description .heading {\r\n font: 22px\/28px Arial, sans-serif;\r\n margin: 0;\r\n }\r\n\r\n .commutes-initial-state .description p {\r\n color: #5f6368;\r\n font: 13px\/20px Arial, sans-serif;\r\n margin: 0;\r\n }\r\n\r\n .commutes-initial-state .add-button {\r\n align-self: center;\r\n background-color: #1a73e8;\r\n border-color: #1a73e8;\r\n border-radius: 4px;\r\n border-style: solid;\r\n color: #fff;\r\n cursor: pointer;\r\n display: inline-flex;\r\n fill: #fff;\r\n padding: 8px 16px 8px 8px;\r\n white-space: nowrap;\r\n }\r\n\r\n .commutes-initial-state .add-button .label {\r\n font: normal 600 15px\/24px Arial, sans-serif;\r\n padding-left: 8px;\r\n }\r\n\r\n @media (max-width: 535px) {\r\n .commutes-initial-state svg {\r\n display: none;\r\n }\r\n\r\n .commutes-initial-state .description {\r\n padding-left: 0;\r\n }\r\n\r\n .commutes-initial-state .description .heading {\r\n font-weight: bold;\r\n font-size: 15px;\r\n line-height: 24px;\r\n }\r\n }\r\n\r\n .commutes-destinations {\r\n display: none;\r\n position: relative;\r\n width: 100%;\r\n }\r\n\r\n .commutes-destinations:hover .visible {\r\n display: block;\r\n }\r\n\r\n .commutes-destinations .destinations-container {\r\n display: flex;\r\n overflow-x: auto;\r\n padding: 8px 8px 4px 8px;\r\n white-space: nowrap;\r\n width: 100%;\r\n }\r\n\r\n .commutes-destinations .destinations-container::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .commutes-destinations .destinations-container::-webkit-scrollbar-thumb {\r\n background-color: #dadce0;\r\n width: 4px;\r\n }\r\n\r\n .commutes-destinations .destination-list {\r\n display: flex;\r\n flex-grow: 1;\r\n }\r\n\r\n .commutes-destinations .right-control,\r\n .commutes-destinations .left-control {\r\n background-color: #fff;\r\n border-radius: 40px;\r\n border-style: none;\r\n bottom: 35px;\r\n box-shadow: 0 2px 3px 0 rgb(60 64 67 \/ 30%), 0 6px 10px 4px rgb(60 64 67 \/ 15%);\r\n cursor: pointer;\r\n fill: #616161;\r\n height: 40px;\r\n padding: 8px;\r\n position: absolute;\r\n width: 40px;\r\n z-index: 100;\r\n }\r\n\r\n .commutes-destinations .right-control:hover,\r\n .commutes-destinations .left-control:hover {\r\n background-color: #f1f3f4;\r\n }\r\n\r\n .commutes-destinations .left-control {\r\n left: 16px;\r\n }\r\n\r\n .commutes-destinations .right-control {\r\n right: 16px;\r\n }\r\n\r\n .commutes-destinations .add-button {\r\n align-items: center;\r\n background-color: #e8f0fe;\r\n border-radius: 8px;\r\n border-color: #e8f0fe;\r\n border-style: solid;\r\n color: #1967d2;\r\n cursor: pointer;\r\n display: flex;\r\n fill: #1967d2;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n font-weight: bold;\r\n gap: 4px;\r\n justify-content: center;\r\n min-width: 156px;\r\n padding: 20px 16px;\r\n }\r\n\r\n .commutes-destinations .add-button:hover {\r\n background-color: #d2e3fc;\r\n border-color: #d2e3fc;\r\n color: #185abc;\r\n fill: #185abc;\r\n }\r\n\r\n .commutes-destinations .destination-container {\r\n cursor: pointer;\r\n display: flex;\r\n flex: 1 1 0;\r\n position: relative;\r\n }\r\n\r\n .commutes-destinations .destination {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);\r\n color: #5f6368;\r\n fill: #5f6368;\r\n height: 72px;\r\n justify-content: space-between;\r\n margin-right: 8px;\r\n min-width: 256px;\r\n overflow: hidden;\r\n padding: 12px;\r\n position: relative;\r\n width: 100%;\r\n }\r\n\r\n .commutes-destinations .active:after {\r\n background-color: #4285f4;\r\n content: '';\r\n display: block;\r\n height: 4px;\r\n left: 0;\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n }\r\n\r\n .commutes-destinations .active + .destination-controls .directions-button {\r\n fill: #4285f4;\r\n }\r\n\r\n .commutes-destinations .active + .destination-controls .edit-button {\r\n opacity: 1;\r\n }\r\n\r\n .commutes-destinations .active .metadata .location-marker {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n\r\n .commutes-destinations .destination-container:hover,\r\n .commutes-destinations .destination-container:focus-within\r\n {\r\n background-color: #f8f9fa;\r\n }\r\n\r\n .commutes-destinations .destination-container:hover .edit-button,\r\n .commutes-destinations .destination-container:focus-within .edit-button\r\n {\r\n opacity: 1;\r\n }\r\n\r\n .commutes-destinations .destination .destination-content {\r\n font-size: 12px;\r\n line-height: 20px;\r\n overflow: hidden;\r\n }\r\n\r\n .commutes-destinations .destination .metadata {\r\n align-items: center;\r\n display: flex;\r\n margin-bottom: 4px;\r\n gap: 4px;\r\n }\r\n\r\n .commutes-destinations .destination-container svg {\r\n height: 18px;\r\n width: 18px;\r\n }\r\n\r\n .commutes-destinations .destination .location-marker {\r\n background-color: #f1f3f4;\r\n border-radius: 8px;\r\n color: #616161;\r\n display: inline-block;\r\n font-size: 14px;\r\n font-weight: bold;\r\n line-height: 16px;\r\n text-align: center;\r\n width: 16px;\r\n }\r\n\r\n .commutes-destinations .destination .address {\r\n margin-bottom: 4px;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .commutes-destinations .destination .address abbr {\r\n text-decoration: none;\r\n }\r\n\r\n .commutes-destinations .destination .destination-eta {\r\n color: #202124;\r\n font-weight: bold;\r\n font-size: 22px;\r\n line-height: 28px;\r\n }\r\n\r\n .commutes-destinations .destination-container .destination-controls {\r\n align-items: flex-end;\r\n display: flex;\r\n flex-direction: column;\r\n min-width: 70px;\r\n position: absolute;\r\n right: 20px;\r\n text-align: right;\r\n top: 12px;\r\n white-space: nowrap;\r\n }\r\n\r\n .commutes-destinations .destination-container .directions-button {\r\n align-items: center;\r\n background-color: #fff;\r\n border-radius: 32px;\r\n border: 1px solid #dadce0;\r\n cursor: pointer;\r\n display: flex;\r\n fill: #5f6368;\r\n height: 32px;\r\n justify-content: center;\r\n margin: 0;\r\n width: 34px;\r\n }\r\n\r\n .commutes-destinations .destination-container .directions-button:hover {\r\n background-color: #e8f0fe;\r\n fill: #4285f4;\r\n }\r\n\r\n .commutes-destinations .destination-container .edit-button {\r\n background-color: #fff;\r\n border-radius: 20px;\r\n border: 1px solid #dadce0;\r\n opacity: 0;\r\n font-size: 14px;\r\n font-weight: bold;\r\n line-height: 22px;\r\n margin: 8px 0 0 0;\r\n padding: 3px 12px 3px 5px;\r\n fill: #616161;\r\n color: #616161;\r\n cursor: pointer;\r\n }\r\n\r\n .commutes-destinations .destination-container .edit-button svg {\r\n display: inline-block;\r\n font-size: 20px;\r\n line-height: 20px;\r\n width: 20px;\r\n vertical-align: middle;\r\n }\r\n\r\n .commutes-destinations .destination-container .edit-button:hover {\r\n background-color: #f1f3f4;\r\n }\r\n\r\n .commutes-map {\r\n flex: 1;\r\n overflow: hidden;\r\n position: relative;\r\n width: 100%;\r\n }\r\n\r\n .commutes-map .map-view {\r\n background-color: rgb(229, 227, 223);\r\n height: 100%;\r\n left: 0;\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n }\r\n\r\n .commutes-modal-container {\r\n align-items: center;\r\n background-color: rgba(0, 0, 0, 0.4);\r\n display: none;\r\n height: 100%;\r\n justify-content: center;\r\n left: 0;\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n z-index: 1000;\r\n }\r\n\r\n .commutes-modal {\r\n background: #fff;\r\n border-radius: 4px;\r\n box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12);\r\n height: 256px;\r\n position: absolute;\r\n width: 360px;\r\n }\r\n\r\n .commutes-modal .content {\r\n padding: 24px 24px 8px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n .commutes-modal .heading {\r\n font: 24px\/32px Arial, sans-serif;\r\n margin: 0;\r\n }\r\n\r\n .commutes-modal input {\r\n font: 16px\/24px Arial, sans-serif;\r\n padding: 10px;\r\n box-sizing: border-box;\r\n width: 100%;\r\n }\r\n\r\n .commutes-modal .error {\r\n background-color: #fce4e4;\r\n border: 1px solid #c03;\r\n }\r\n\r\n .commutes-modal .error-message {\r\n color: #c03;\r\n display: inline-block;\r\n font: 12px\/14px Arial, sans-serif;\r\n margin: 0 0 5px;\r\n }\r\n\r\n .commutes-modal .travel-modes {\r\n display: flex;\r\n flex-direction: row;\r\n height: 40px;\r\n margin-bottom: 12px;\r\n padding: 0;\r\n width: 100%;\r\n }\r\n\r\n .commutes-modal .travel-modes [type=radio] {\r\n height: 0;\r\n opacity: 0;\r\n position: absolute;\r\n width: 0;\r\n }\r\n\r\n .commutes-modal .travel-modes label {\r\n align-items: center;\r\n border: solid #dadce0;\r\n border-width: 1px 0.031em;\r\n cursor: pointer;\r\n display: inline-flex;\r\n fill: #5f6368;\r\n flex: 1;\r\n justify-content: center;\r\n padding: 6px;\r\n position: relative;\r\n transition: background 0.5s, fill 0.5s;\r\n }\r\n\r\n .commutes-modal .travel-modes label:hover {\r\n background-color: #f1f3f4;\r\n }\r\n\r\n .commutes-modal .travel-modes svg {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n\r\n .commutes-modal .travel-modes .left-label {\r\n border-left-width: 1px;\r\n border-radius: 4px 0 0 4px;\r\n }\r\n\r\n .commutes-modal .travel-modes .right-label {\r\n border-radius: 0 4px 4px 0;\r\n border-right-width: 1px;\r\n }\r\n\r\n .commutes-modal .travel-modes input[type=radio]:checked+label {\r\n background: #e8f0fe;\r\n fill: #1967d2;\r\n }\r\n\r\n .commutes-modal .travel-modes input[type=radio]:focus-visible+label {\r\n outline: 2px solid Highlight;\r\n outline: 2px solid -webkit-focus-ring-color;\r\n outline-offset: -2px;\r\n }\r\n\r\n .commutes-modal .modal-action-bar {\r\n display: flex;\r\n justify-content: flex-end;\r\n }\r\n\r\n .commutes-modal .modal-action-bar button {\r\n background: #ffff;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 14px;\r\n font-weight: bold;\r\n line-height: 32px;\r\n }\r\n\r\n .commutes-modal .modal-action-bar .delete-destination-button {\r\n color: #c5221f;\r\n left: 18px;\r\n position: absolute;\r\n }\r\n\r\n .commutes-modal .modal-action-bar .cancel-button {\r\n color: #0000008a;\r\n }\r\n\r\n .commutes-modal .modal-action-bar .add-destination-button,\r\n .commutes-modal .modal-action-bar .edit-destination-button {\r\n color: #1a73e8;\r\n }\r\n\r\n .hide {\r\n display: none;\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n \r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-initial-icon\">\r\n <path d=\"M41 20H18.6c-9.5 0-10.8 13.5 0 13.5h14.5C41 33.5 41 45 33 45H17.7\" stroke=\"#D2E3FC\" stroke-width=\"5\"><\/path>\r\n <path d=\"M41 22c.2 0 .4 0 .6-.2l.4-.5c.3-1 .7-1.7 1.1-2.5l2-3c.8-1 1.5-2 2-3 .6-1 .9-2.3.9-3.8 0-2-.7-3.6-2-5-1.4-1.3-3-2-5-2s-3.6.7-5 2c-1.3 1.4-2 3-2 5 0 1.4.3 2.6.8 3.6s1.2 2 2 3.2c.9 1 1.6 2 2 2.8.5.9 1 1.7 1.2 2.7l.4.5.6.2Zm0-10.5c-.7 0-1.3-.2-1.8-.7-.5-.5-.7-1.1-.7-1.8s.2-1.3.7-1.8c.5-.5 1.1-.7 1.8-.7s1.3.2 1.8.7c.5.5.7 1.1.7 1.8s-.2 1.3-.7 1.8c-.5.5-1.1.7-1.8.7Z\" fill=\"#185ABC\"><\/path>\r\n <path d=\"m12 32-8 6v12h5v-7h6v7h5V38l-8-6Z\" fill=\"#4285F4\"><\/path>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commutes-initial-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-add-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commutes-add-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-driving-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path d=\"M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.85 7h10.29l1.08 3.11H5.77L6.85 7zM19 17H5v-5h14v5z\"\/>\r\n <circle cx=\"7.5\" cy=\"14.5\" r=\"1.5\"\/>\r\n <circle cx=\"16.5\" cy=\"14.5\" r=\"1.5\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commutes-driving-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-transit-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path d=\"M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h12v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zm5.66 3H6.43c.61-.52 2.06-1 5.57-1 3.71 0 5.12.46 5.66 1zM11 7v3H6V7h5zm2 0h5v3h-5V7zm3.5 10h-9c-.83 0-1.5-.67-1.5-1.5V12h12v3.5c0 .83-.67 1.5-1.5 1.5z\"\/>\r\n <circle cx=\"8.5\" cy=\"14.5\" r=\"1.5\"\/>\r\n <circle cx=\"15.5\" cy=\"14.5\" r=\"1.5\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commutes-transit-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-bicycling-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path d=\"M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commutes-bicycling-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-walking-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path d=\"M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.56-.89-1.68-1.25-2.65-.84L6 8.3V13h2V9.6l1.8-.7\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commutes-walking-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-chevron-left-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commutes-chevron-left-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-chevron-right-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path xmlns=\"http:\/\/www.w3.org\/2000\/svg\" d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commutes-chevron-right-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-arrow-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path d=\"M16.01 11H4v2h12.01v3L20 12l-3.99-4v3z\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commutes-arrow-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-directions-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path d=\"M22.43 10.59l-9.01-9.01c-.75-.75-2.07-.76-2.83 0l-9 9c-.78.78-.78 2.04 0 2.82l9 9c.39.39.9.58 1.41.58.51 0 1.02-.19 1.41-.58l8.99-8.99c.79-.76.8-2.02.03-2.82zm-10.42 10.4l-9-9 9-9 9 9-9 9zM8 11v4h2v-3h4v2.5l3.5-3.5L14 7.5V10H9c-.55 0-1 .45-1 1z\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commute-directions-icon\"\/>\r\n <\/svg>\r\n <svg class=\"hide\">\r\n <defs>\r\n <symbol id=\"commutes-edit-icon\">\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"\/>\r\n <path d=\"M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z\"\/>\r\n <\/symbol>\r\n <\/defs>\r\n <use href=\"#commute-edit-icon\"\/>\r\n <\/svg>\r\n \r\n\r\n <main class=\"commutes\">\r\n <div class=\"commutes-map\" aria-label=\"Map\">\r\n <div class=\"map-view\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"commutes-info\">\r\n <div class=\"commutes-initial-state\">\r\n <svg aria-label=\"Directions Icon\" width=\"53\" height=\"53\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <use href=\"#commutes-initial-icon\"\/>\r\n <\/svg>\r\n <div class=\"description\">\r\n <h1 class=\"heading\">Estimate commute time<\/h1>\r\n <p>See travel time and directions for places nearby<\/p>\r\n <\/div>\r\n <button class=\"add-button\" autofocus>\r\n <svg aria-label=\"Add Icon\" width=\"24px\" height=\"24px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <use href=\"#commutes-add-icon\"\/>\r\n <\/svg>\r\n <span class=\"label\">Add destination<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"commutes-destinations\">\r\n <div class=\"destinations-container\">\r\n <div class=\"destination-list\"><\/div>\r\n <button class=\"add-button\">\r\n <svg aria-label=\"Add Icon\" width=\"24px\" height=\"24px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <use href=\"#commutes-add-icon\"\/>\r\n <\/svg>\r\n <div class=\"label\">Add destination<\/div>\r\n <\/button>\r\n <\/div>\r\n <button class=\"left-control hide\" data-direction=\"-1\" aria-label=\"Scroll left\">\r\n <svg width=\"24px\" height=\"24px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" data-direction=\"-1\">\r\n <use href=\"#commutes-chevron-left-icon\" data-direction=\"-1\"\/>\r\n <\/svg>\r\n <\/button>\r\n <button class=\"right-control hide\" data-direction=\"1\" aria-label=\"Scroll right\">\r\n <svg width=\"24px\" height=\"24px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" data-direction=\"1\">\r\n <use href=\"#commutes-chevron-right-icon\" data-direction=\"1\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <div class=\"commutes-modal-container\">\r\n <div class=\"commutes-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"add-edit-heading\">\r\n <div class=\"content\">\r\n <h2 id=\"add-edit-heading\" class=\"heading\">Add destination<\/h2>\r\n <form id=\"destination-form\">\r\n <input type=\"text\" id=\"destination-address-input\" name=\"destination-address\" placeholder=\"Enter a place or address\" autocomplete=\"off\" required>\r\n <div class=\"error-message\" role=\"alert\"><\/div>\r\n <div class=\"travel-modes\">\r\n <input type=\"radio\" name=\"travel-mode\" id=\"driving-mode\" value=\"DRIVING\" aria-label=\"Driving travel mode\">\r\n <label for=\"driving-mode\" class=\"left-label\" title=\"Driving travel mode\">\r\n <svg aria-label=\"Driving icon\" mlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <use href=\"#commutes-driving-icon\"\/>\r\n <\/svg>\r\n <\/label>\r\n <input type=\"radio\" name=\"travel-mode\" id=\"transit-mode\" value=\"TRANSIT\" aria-label=\"Public transit travel mode\">\r\n <label for=\"transit-mode\" title=\"Public transit travel mode\">\r\n <svg aria-label=\"Public transit icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <use href=\"#commutes-transit-icon\"\/>\r\n <\/svg>\r\n <\/label>\r\n <input type=\"radio\" name=\"travel-mode\" id=\"bicycling-mode\" value=\"BICYCLING\" aria-label=\"Bicycling travel mode\">\r\n <label for=\"bicycling-mode\" title=\"Bicycling travel mode\">\r\n <svg aria-label=\"Bicycling icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <use href=\"#commutes-bicycling-icon\"\/>\r\n <\/svg>\r\n <\/label>\r\n <input type=\"radio\" name=\"travel-mode\" id=\"walking-mode\" value=\"WALKING\" aria-label=\"Walking travel mode\">\r\n <label for=\"walking-mode\" class=\"right-label\" title=\"Walking travel mode\">\r\n <svg aria-label=\"Walking icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <use href=\"#commutes-walking-icon\"\/>\r\n <\/svg>\r\n <\/label>\r\n <\/div>\r\n <\/form>\r\n <div class=\"modal-action-bar\">\r\n <button class=\"delete-destination-button hide\" type=\"reset\">\r\n Delete\r\n <\/button>\r\n <button class=\"cancel-button\" type=\"reset\">\r\n Cancel\r\n <\/button>\r\n <button class=\"add-destination-button\" type=\"button\">\r\n Add\r\n <\/button>\r\n <button class=\"edit-destination-button hide\" type=\"button\">\r\n Done\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n 'use strict';\r\n\r\n \/**\r\n * Element selectors for commutes widget.\r\n *\/\r\n const commutesEl = {\r\n map: document.querySelector('.map-view'),\r\n initialStatePanel: document.querySelector('.commutes-initial-state'),\r\n destinationPanel: document.querySelector('.commutes-destinations'),\r\n modal: document.querySelector('.commutes-modal-container'),\r\n };\r\n\r\n \/**\r\n * Element selectors for commutes destination panel.\r\n *\/\r\n const destinationPanelEl = {\r\n addButton: commutesEl.destinationPanel.querySelector('.add-button'),\r\n container: commutesEl.destinationPanel.querySelector('.destinations-container'),\r\n list: commutesEl.destinationPanel.querySelector('.destination-list'),\r\n scrollLeftButton: commutesEl.destinationPanel.querySelector('.left-control'),\r\n scrollRightButton: commutesEl.destinationPanel.querySelector('.right-control'),\r\n getActiveDestination: () => commutesEl.destinationPanel.querySelector('.destination.active'),\r\n };\r\n\r\n \/**\r\n * Element selectors for commutes modal popup.\r\n *\/\r\n const destinationModalEl = {\r\n title: commutesEl.modal.querySelector('h2'),\r\n form: commutesEl.modal.querySelector('form'),\r\n destinationInput: commutesEl.modal.querySelector('input[name=\"destination-address\"]'),\r\n errorMessage: commutesEl.modal.querySelector('.error-message'),\r\n addButton: commutesEl.modal.querySelector('.add-destination-button'),\r\n deleteButton: commutesEl.modal.querySelector('.delete-destination-button'),\r\n editButton: commutesEl.modal.querySelector('.edit-destination-button'),\r\n cancelButton: commutesEl.modal.querySelector('.cancel-button'),\r\n getTravelModeInput: () => commutesEl.modal.querySelector('input[name=\"travel-mode\"]:checked'),\r\n };\r\n\r\n \/**\r\n * Max number of destination allowed to be added to commutes panel.\r\n *\/\r\n const MAX_NUM_DESTINATIONS = 10;\r\n\r\n \/**\r\n * Bounds to bias search within ~50km distance.\r\n *\/\r\n const BIAS_BOUND_DISTANCE = 0.5;\r\n\r\n \/**\r\n * Hour in seconds.\r\n *\/\r\n const HOUR_IN_SECONDS = 3600;\r\n\r\n \/**\r\n * Minutes in seconds.\r\n *\/\r\n const MIN_IN_SECONDS = 60;\r\n\r\n \/**\r\n * Stroke colors for destination direction polylines for different states.\r\n *\/\r\n const STROKE_COLORS = {\r\n active: {\r\n innerStroke: '#4285F4',\r\n outerStroke: '#185ABC',\r\n },\r\n inactive: {\r\n innerStroke: '#BDC1C6',\r\n outerStroke: '#80868B',\r\n },\r\n };\r\n\r\n \/**\r\n * Marker icon colors for different states.\r\n *\/\r\n const MARKER_ICON_COLORS = {\r\n active: {\r\n fill: '#EA4335',\r\n stroke: '#C5221F',\r\n label: '#FFF',\r\n },\r\n inactive: {\r\n fill: '#F1F3F4',\r\n stroke: '#9AA0A6',\r\n label: '#3C4043',\r\n },\r\n };\r\n\r\n \/**\r\n * List of operations to perform on destinations.\r\n *\/\r\n const DestinationOperation = {\r\n ADD: 'ADD',\r\n EDIT: 'EDIT',\r\n DELETE: 'DELETE',\r\n };\r\n\r\n \/**\r\n * List of available commutes travel mode.\r\n *\/\r\n const TravelMode = {\r\n DRIVING: 'DRIVING',\r\n TRANSIT: 'TRANSIT',\r\n BICYCLING: 'BICYCLING',\r\n WALKING: 'WALKING',\r\n };\r\n\r\n \/**\r\n * Defines instance of Commutes widget to be instantiated when Map library\r\n * loads.\r\n *\/\r\n function Commutes(configuration) {\r\n let commutesMap;\r\n let activeDestinationIndex;\r\n let origin = configuration.mapOptions.center;\r\n let destinations = configuration.destination || [];\r\n let markerIndex = 0;\r\n let lastActiveEl;\r\n\r\n const markerIconConfig = {\r\n path:\r\n 'M10 27c-.2 0-.2 0-.5-1-.3-.8-.7-2-1.6-3.5-1-1.5-2-2.7-3-3.8-2.2-2.8-3.9-5-3.9-8.8C1 4.9 5 1 10 1s9 4 9 8.9c0 3.9-1.8 6-4 8.8-1 1.2-1.9 2.4-2.8 3.8-1 1.5-1.4 2.7-1.6 3.5-.3 1-.4 1-.6 1Z',\r\n fillOpacity: 1,\r\n strokeWeight: 1,\r\n anchor: new google.maps.Point(15, 29),\r\n scale: 1.2,\r\n labelOrigin: new google.maps.Point(10, 9),\r\n };\r\n const originMarkerIcon = {\r\n ...markerIconConfig,\r\n fillColor: MARKER_ICON_COLORS.active.fill,\r\n strokeColor: MARKER_ICON_COLORS.active.stroke,\r\n };\r\n const destinationMarkerIcon = {\r\n ...markerIconConfig,\r\n fillColor: MARKER_ICON_COLORS.inactive.fill,\r\n strokeColor: MARKER_ICON_COLORS.inactive.stroke,\r\n };\r\n const bikeLayer = new google.maps.BicyclingLayer();\r\n const publicTransitLayer = new google.maps.TransitLayer();\r\n\r\n initMapView();\r\n initDestinations();\r\n initCommutesPanel();\r\n initCommutesModal();\r\n\r\n \/**\r\n * Initializes map view on commutes widget.\r\n *\/\r\n function initMapView() {\r\n const mapOptionConfig = configuration.mapOptions;\r\n commutesMap = new google.maps.Map(commutesEl.map, mapOptionConfig);\r\n\r\n configuration.defaultTravelModeEnum =\r\n parseTravelModeEnum(configuration.defaultTravelMode);\r\n setTravelModeLayer(configuration.defaultTravelModeEnum);\r\n createMarker(origin);\r\n }\r\n\r\n \/**\r\n * Initializes commutes widget with destinations info if provided with a list\r\n * of initial destinations and update view.\r\n *\/\r\n function initDestinations() {\r\n if (!configuration.initialDestinations) return;\r\n let callbackCounter = 0;\r\n const placesService = new google.maps.places.PlacesService(commutesMap);\r\n for (const destination of configuration.initialDestinations) {\r\n destination.travelModeEnum = parseTravelModeEnum(destination.travelMode);\r\n const label = getNextMarkerLabel();\r\n const request = {\r\n placeId: destination.placeId,\r\n fields: ['place_id', 'geometry', 'name'],\r\n };\r\n placesService.getDetails(\r\n request,\r\n function(place) {\r\n if (!place.geometry || !place.geometry.location) return;\r\n const travelModeEnum =\r\n destination.travelModeEnum || configuration.defaultTravelModeEnum;\r\n const destinationConfig =\r\n createDestinationConfig(place, travelModeEnum, label);\r\n getDirections(destinationConfig).then((response) => {\r\n if (!response) return;\r\n destinations.push(destinationConfig);\r\n getCommutesInfo(response, destinationConfig);\r\n callbackCounter++;\r\n \/\/ Update commutes panel and click event objects after getting\r\n \/\/ direction to all destinations.\r\n if (callbackCounter === configuration.initialDestinations.length) {\r\n destinations.sort(function(a, b) {\r\n return a.label < b.label ? -1 : 1;\r\n });\r\n let bounds = new google.maps.LatLngBounds();\r\n for (let i = 0; i < destinations.length; i++) {\r\n assignMapObjectListeners(destinations[i], i);\r\n updateCommutesPanel(destinations[i], i, DestinationOperation.ADD);\r\n bounds.union(destinations[i].bounds);\r\n }\r\n const lastIndex = destinations.length - 1;\r\n handleRouteClick(destinations[lastIndex], lastIndex);\r\n commutesMap.fitBounds(bounds);\r\n }\r\n });\r\n },\r\n () => {\r\n console.error('Failed to retrieve places info due to ' + e);\r\n });\r\n }\r\n }\r\n\r\n \/**\r\n * Initializes the bottom panel for updating map view and displaying commutes\r\n * info.\r\n *\/\r\n function initCommutesPanel() {\r\n const addCommutesButtonEls = document.querySelectorAll('.add-button');\r\n addCommutesButtonEls.forEach(addButton => {\r\n addButton.addEventListener('click', () => {\r\n destinationModalEl.title.innerHTML = 'Add destination';\r\n hideElement(destinationModalEl.deleteButton);\r\n hideElement(destinationModalEl.editButton);\r\n showElement(destinationModalEl.addButton);\r\n showModal();\r\n const travelModeEnum = configuration.defaultTravelModeEnum || TravelMode.DRIVING;\r\n const travelModeId = travelModeEnum.toLowerCase() + '-mode';\r\n document.forms['destination-form'][travelModeId].checked = true;\r\n });\r\n });\r\n\r\n destinationPanelEl.scrollLeftButton.addEventListener(\r\n 'click', handleScrollButtonClick);\r\n destinationPanelEl.scrollRightButton.addEventListener(\r\n 'click', handleScrollButtonClick);\r\n destinationPanelEl.list.addEventListener('keydown', (e) => {\r\n if (e.key === 'Enter' &&\r\n e.target !== destinationPanelEl.getActiveDestination()) {\r\n e.target.click();\r\n e.preventDefault();\r\n }\r\n });\r\n }\r\n\r\n \/**\r\n * Initializes commutes modal to gathering destination inputs. Configures the\r\n * event target listeners to update view and behaviors on the modal.\r\n *\/\r\n function initCommutesModal() {\r\n const boundConfig = {\r\n north: origin.lat + BIAS_BOUND_DISTANCE,\r\n south: origin.lat - BIAS_BOUND_DISTANCE,\r\n east: origin.lng + BIAS_BOUND_DISTANCE,\r\n west: origin.lng - BIAS_BOUND_DISTANCE,\r\n };\r\n\r\n const destinationFormReset = function() {\r\n destinationModalEl.destinationInput.classList.remove('error');\r\n destinationModalEl.errorMessage.innerHTML = '';\r\n destinationModalEl.form.reset();\r\n destinationToAdd = null;\r\n };\r\n\r\n const autocompleteOptions = {\r\n bounds: boundConfig,\r\n fields: ['place_id', 'geometry', 'name'],\r\n };\r\n const autocomplete = new google.maps.places.Autocomplete(\r\n destinationModalEl.destinationInput, autocompleteOptions);\r\n let destinationToAdd;\r\n autocomplete.addListener('place_changed', () => {\r\n const place = autocomplete.getPlace();\r\n if (!place.geometry || !place.geometry.location) {\r\n return;\r\n } else {\r\n destinationToAdd = place;\r\n destinationModalEl.getTravelModeInput().focus();\r\n }\r\n destinationModalEl.destinationInput.classList.remove('error');\r\n destinationModalEl.errorMessage.innerHTML = '';\r\n });\r\n\r\n destinationModalEl.addButton.addEventListener('click', () => {\r\n const isValidInput = validateDestinationInput(destinationToAdd);\r\n if (!isValidInput) return;\r\n const selectedTravelMode = destinationModalEl.getTravelModeInput().value;\r\n addDestinationToList(destinationToAdd, selectedTravelMode);\r\n destinationFormReset();\r\n hideModal();\r\n });\r\n\r\n destinationModalEl.editButton.addEventListener('click', () => {\r\n const destination = {...destinations[activeDestinationIndex]};\r\n const selectedTravelMode = destinationModalEl.getTravelModeInput().value;\r\n const isSameDestination =\r\n destination.name === destinationModalEl.destinationInput.value;\r\n const isSameTravelMode = destination.travelModeEnum === selectedTravelMode;\r\n if (isSameDestination && isSameTravelMode) {\r\n hideModal();\r\n return;\r\n }\r\n if (!isSameDestination) {\r\n const isValidInput = validateDestinationInput(destinationToAdd);\r\n if (!isValidInput) return;\r\n destination.name = destinationToAdd.name;\r\n destination.place_id = destinationToAdd.place_id;\r\n destination.url = generateMapsUrl(destinationToAdd, selectedTravelMode);\r\n }\r\n if (!isSameTravelMode) {\r\n destination.travelModeEnum = selectedTravelMode;\r\n destination.url = generateMapsUrl(destination, selectedTravelMode);\r\n }\r\n destinationFormReset();\r\n getDirections(destination)\r\n .then((response) => {\r\n if (!response) return;\r\n const currentIndex = activeDestinationIndex;\r\n \/\/ Remove current active direction before replacing it with updated\r\n \/\/ routes.\r\n removeDirectionsFromMapView(destination);\r\n destinations[activeDestinationIndex] = destination;\r\n getCommutesInfo(response, destination);\r\n assignMapObjectListeners(destination, activeDestinationIndex);\r\n updateCommutesPanel(\r\n destination, activeDestinationIndex, DestinationOperation.EDIT);\r\n handleRouteClick(destination, activeDestinationIndex);\r\n const newEditButton = destinationPanelEl.list.children\r\n .item(activeDestinationIndex)\r\n .querySelector('.edit-button');\r\n newEditButton.focus();\r\n })\r\n .catch((e) => console.error('Editing directions failed due to ' + e));\r\n hideModal();\r\n });\r\n\r\n destinationModalEl.cancelButton.addEventListener('click', () => {\r\n destinationFormReset();\r\n hideModal();\r\n });\r\n\r\n destinationModalEl.deleteButton.addEventListener('click', () => {\r\n removeDirectionsFromMapView(destinations[activeDestinationIndex]);\r\n updateCommutesPanel(\r\n destinations[activeDestinationIndex], activeDestinationIndex,\r\n DestinationOperation.DELETE);\r\n activeDestinationIndex = undefined;\r\n destinationFormReset();\r\n let elToFocus;\r\n if (destinations.length) {\r\n const lastIndex = destinations.length - 1;\r\n handleRouteClick(destinations[lastIndex], lastIndex);\r\n elToFocus = destinationPanelEl.getActiveDestination();\r\n } else {\r\n elToFocus = commutesEl.initialStatePanel.querySelector('.add-button');\r\n }\r\n hideModal(elToFocus);\r\n });\r\n\r\n window.onmousedown = function(event) {\r\n if (event.target === commutesEl.modal) {\r\n destinationFormReset();\r\n hideModal();\r\n }\r\n };\r\n\r\n commutesEl.modal.addEventListener('keydown', (e) => {\r\n switch(e.key) {\r\n case 'Enter':\r\n if (e.target === destinationModalEl.cancelButton ||\r\n e.target === destinationModalEl.deleteButton) {\r\n return;\r\n }\r\n if (destinationModalEl.addButton.style.display !== 'none') {\r\n destinationModalEl.addButton.click();\r\n } else if (destinationModalEl.editButton.style.display !== 'none') {\r\n destinationModalEl.editButton.click();\r\n }\r\n break;\r\n case \"Esc\":\r\n case \"Escape\":\r\n hideModal();\r\n break;\r\n default:\r\n return;\r\n }\r\n e.preventDefault();\r\n });\r\n\r\n \/\/ Trap focus in the modal so that tabbing on the last interactive element\r\n \/\/ focuses on the first, and shift-tabbing on the first interactive element\r\n \/\/ focuses on the last.\r\n\r\n const firstInteractiveElement = destinationModalEl.destinationInput;\r\n const lastInteractiveElements = [\r\n destinationModalEl.addButton,\r\n destinationModalEl.editButton,\r\n ];\r\n\r\n firstInteractiveElement.addEventListener(\r\n 'keydown', handleFirstInteractiveElementTab);\r\n for (const el of lastInteractiveElements) {\r\n el.addEventListener('keydown', handleLastInteractiveElementTab);\r\n }\r\n\r\n function handleFirstInteractiveElementTab(event) {\r\n if (event.key === 'Tab' && event.shiftKey) {\r\n for (const el of lastInteractiveElements) {\r\n if (el.style.display !== 'none') {\r\n event.preventDefault();\r\n el.focus();\r\n return;\r\n }\r\n }\r\n }\r\n }\r\n\r\n function handleLastInteractiveElementTab(event) {\r\n if (event.key === 'Tab' && !event.shiftKey) {\r\n event.preventDefault();\r\n firstInteractiveElement.focus();\r\n }\r\n }\r\n }\r\n\r\n \/**\r\n * Checks if destination input is valid and ensure no duplicate places or more\r\n * than max number places are added.\r\n *\/\r\n function validateDestinationInput(destinationToAdd) {\r\n let errorMessage;\r\n let isValidInput = false;\r\n if (!destinationToAdd) {\r\n errorMessage = 'No details available for destination input';\r\n } else if (destinations.length > MAX_NUM_DESTINATIONS) {\r\n errorMessage =\r\n 'Cannot add more than ' + MAX_NUM_DESTINATIONS + ' destinations';\r\n } else if (\r\n destinations &&\r\n destinations.find(\r\n destination =>\r\n destination.place_id === destinationToAdd.place_id)) {\r\n errorMessage = 'Destination is already added';\r\n } else {\r\n isValidInput = true;\r\n }\r\n if (!isValidInput) {\r\n destinationModalEl.errorMessage.innerHTML = errorMessage;\r\n destinationModalEl.destinationInput.classList.add('error');\r\n }\r\n return isValidInput;\r\n }\r\n\r\n \/**\r\n * Removes polylines and markers of currently active directions.\r\n *\/\r\n function removeDirectionsFromMapView(destination) {\r\n destination.polylines.innerStroke.setMap(null);\r\n destination.polylines.outerStroke.setMap(null);\r\n destination.marker.setMap(null);\r\n }\r\n\r\n \/**\r\n * Generates destination card template, attach event target listeners, and\r\n * adds template to destination list depending on the operations:\r\n * - add new destination card template to the end of the list on add.\r\n * - replace destination card template for current selected on edit.\r\n * - do nothing on default or delete.\r\n *\/\r\n function buildDestinationCardTemplate(\r\n destination, destinationIdx, destinationOperation) {\r\n let editButtonEl;\r\n switch (destinationOperation) {\r\n case DestinationOperation.ADD:\r\n destinationPanelEl.list.insertAdjacentHTML(\r\n 'beforeend',\r\n '<div class=\"destination-container\">' +\r\n generateDestinationTemplate(destination) + '<\/div>');\r\n const destinationContainerEl = destinationPanelEl.list.lastElementChild;\r\n destinationContainerEl.addEventListener('click', () => {\r\n handleRouteClick(destination, destinationIdx);\r\n });\r\n editButtonEl = destinationContainerEl.querySelector('.edit-button');\r\n destinationPanelEl.container.scrollLeft =\r\n destinationPanelEl.container.scrollWidth;\r\n break;\r\n case DestinationOperation.EDIT:\r\n const activeDestinationContainerEl =\r\n destinationPanelEl.getActiveDestination().parentElement;\r\n activeDestinationContainerEl.innerHTML = generateDestinationTemplate(destination);\r\n activeDestinationContainerEl.addEventListener('click', () => {\r\n handleRouteClick(destination, destinationIdx);\r\n });\r\n editButtonEl = activeDestinationContainerEl.querySelector('.edit-button');\r\n break;\r\n case DestinationOperation.DELETE:\r\n default:\r\n }\r\n\r\n editButtonEl.addEventListener('click', () => {\r\n destinationModalEl.title.innerHTML = 'Edit destination';\r\n destinationModalEl.destinationInput.value = destination.name;\r\n showElement(destinationModalEl.deleteButton);\r\n showElement(destinationModalEl.editButton);\r\n hideElement(destinationModalEl.addButton);\r\n showModal();\r\n const travelModeId = destination.travelModeEnum.toLowerCase() + '-mode';\r\n document.forms['destination-form'][travelModeId].checked = true;\r\n \/\/ Update the autocomplete widget as if it was user input.\r\n destinationModalEl.destinationInput.dispatchEvent(new Event('input'));\r\n });\r\n }\r\n\r\n \/**\r\n * Updates view of commutes panel depending on the operation:\r\n * - build\/update destination template if add or edit.\r\n * - remove destination from destination list and rebuild template.\r\n *\/\r\n function updateCommutesPanel(\r\n destination, destinationIdx, destinationOperation) {\r\n switch (destinationOperation) {\r\n case DestinationOperation.ADD:\r\n hideElement(commutesEl.initialStatePanel);\r\n showElement(commutesEl.destinationPanel);\r\n \/\/ fall through\r\n case DestinationOperation.EDIT:\r\n buildDestinationCardTemplate(\r\n destination, destinationIdx, destinationOperation);\r\n break;\r\n case DestinationOperation.DELETE:\r\n destinations.splice(destinationIdx, 1);\r\n destinationPanelEl.list.innerHTML = '';\r\n for (let i = 0; i < destinations.length; i++) {\r\n buildDestinationCardTemplate(\r\n destinations[i], i, DestinationOperation.ADD);\r\n assignMapObjectListeners(destinations[i], i);\r\n }\r\n default:\r\n }\r\n if (!destinations.length) {\r\n showElement(commutesEl.initialStatePanel, commutesEl.initialStatePanel);\r\n hideElement(commutesEl.destinationPanel);\r\n activeDestinationIndex = undefined;\r\n return;\r\n }\r\n destinationPanelEl.container.addEventListener('scroll', handlePanelScroll);\r\n destinationPanelEl.container.dispatchEvent(new Event('scroll'));\r\n }\r\n\r\n \/**\r\n * Adds new destination to the list and get directions and commutes info.\r\n *\/\r\n function addDestinationToList(destinationToAdd, travelModeEnum) {\r\n const destinationConfig =\r\n createDestinationConfig(destinationToAdd, travelModeEnum);\r\n const newDestinationIndex = destinations.length;\r\n getDirections(destinationConfig)\r\n .then((response) => {\r\n if (!response) return;\r\n destinations.push(destinationConfig);\r\n getCommutesInfo(response, destinationConfig);\r\n assignMapObjectListeners(destinationConfig, newDestinationIndex);\r\n updateCommutesPanel(\r\n destinationConfig, newDestinationIndex, DestinationOperation.ADD);\r\n handleRouteClick(destinationConfig, newDestinationIndex);\r\n destinationPanelEl.addButton.focus();\r\n })\r\n .catch((e) => console.error('Adding destination failed due to ' + e));\r\n }\r\n\r\n \/**\r\n * Returns a new marker label on each call. Marker labels are the capital\r\n * letters of the alphabet in order.\r\n *\/\r\n function getNextMarkerLabel() {\r\n const markerLabels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\r\n const label = markerLabels[markerIndex];\r\n markerIndex = (markerIndex + 1) % markerLabels.length;\r\n return label;\r\n }\r\n\r\n \/**\r\n * Creates a destination config object from the given data. The label argument\r\n * is optional; a new label will be generated if not provided.\r\n *\/\r\n function createDestinationConfig(destinationToAdd, travelModeEnum, label) {\r\n return {\r\n name: destinationToAdd.name,\r\n place_id: destinationToAdd.place_id,\r\n label: label || getNextMarkerLabel(),\r\n travelModeEnum: travelModeEnum,\r\n url: generateMapsUrl(destinationToAdd, travelModeEnum),\r\n };\r\n }\r\n\r\n \/**\r\n * Gets directions to destination from origin, add route to map view, and\r\n * update commutes panel with distance and directions info.\r\n *\/\r\n function getDirections(destination) {\r\n const request = {\r\n origin: origin,\r\n destination: {'placeId': destination.place_id},\r\n travelMode: destination.travelModeEnum,\r\n unitSystem: configuration.distanceMeasurementType === 'METRIC' ?\r\n google.maps.UnitSystem.METRIC : google.maps.UnitSystem.IMPERIAL,\r\n };\r\n const directionsService = new google.maps.DirectionsService();\r\n return directionsService.route(request).then(response => {\r\n return response;\r\n });\r\n }\r\n\r\n \/**\r\n * Adds route polyline, marker, and commutes info to map and destinations\r\n * list.\r\n *\/\r\n function getCommutesInfo(directionResponse, destination) {\r\n if (!directionResponse) return;\r\n const path = directionResponse.routes[0].overview_path;\r\n const bounds = directionResponse.routes[0].bounds;\r\n const directionLeg = directionResponse.routes[0].legs[0];\r\n const destinationLocation = directionLeg.end_location;\r\n const distance = directionLeg.distance.text;\r\n const duration = convertDurationValueAsString(directionLeg.duration.value);\r\n\r\n const innerStroke = new google.maps.Polyline({\r\n path: path,\r\n strokeColor: STROKE_COLORS.inactive.innerStroke,\r\n strokeOpacity: 1.0,\r\n strokeWeight: 3,\r\n zIndex: 10\r\n });\r\n\r\n const outerStroke = new google.maps.Polyline({\r\n path: path,\r\n strokeColor: STROKE_COLORS.inactive.outerStroke,\r\n strokeOpacity: 1.0,\r\n strokeWeight: 6,\r\n zIndex: 1\r\n });\r\n\r\n const marker = createMarker(destinationLocation, destination.label);\r\n\r\n innerStroke.setMap(commutesMap);\r\n outerStroke.setMap(commutesMap);\r\n\r\n destination.distance = distance;\r\n destination.duration = duration;\r\n destination.marker = marker;\r\n destination.polylines = {innerStroke, outerStroke};\r\n destination.bounds = bounds;\r\n }\r\n\r\n \/**\r\n * Assigns event target listeners to map objects of corresponding destination\r\n * index.\r\n *\/\r\n function assignMapObjectListeners(destination, destinationIdx) {\r\n google.maps.event.clearListeners(destination.marker, 'click');\r\n\r\n google.maps.event.addListener(destination.marker, 'click', () => {\r\n handleRouteClick(destination, destinationIdx);\r\n destinationPanelEl.list.querySelectorAll('.destination')[destinationIdx].focus();\r\n });\r\n google.maps.event.addListener(destination.marker, 'mouseover', () => {\r\n changeMapObjectStrokeWeight(destination, true);\r\n });\r\n google.maps.event.addListener(destination.marker, 'mouseout', () => {\r\n changeMapObjectStrokeWeight(destination, false);\r\n });\r\n for (const strokeLine in destination.polylines) {\r\n google.maps.event.clearListeners(destination.polylines[strokeLine], 'click');\r\n google.maps.event.clearListeners(destination.polylines[strokeLine], 'mouseover');\r\n\r\n google.maps.event.addListener(destination.polylines[strokeLine], 'click', () => {\r\n handleRouteClick(destination, destinationIdx);\r\n destinationPanelEl.list.querySelectorAll('.destination')[destinationIdx].focus();\r\n });\r\n google.maps.event.addListener(destination.polylines[strokeLine], 'mouseover', () => {\r\n changeMapObjectStrokeWeight(destination, true);\r\n });\r\n google.maps.event.addListener(destination.polylines[strokeLine], 'mouseout', () => {\r\n changeMapObjectStrokeWeight(destination, false);\r\n });\r\n }\r\n }\r\n\r\n \/**\r\n * Generates the Google Map url for direction from origin to destination with\r\n * corresponding travel mode.\r\n *\/\r\n function generateMapsUrl(destination, travelModeEnum) {\r\n let googleMapsUrl = 'https:\/\/www.google.com\/maps\/dir\/?api=1';\r\n googleMapsUrl += `&origin=${origin.lat},${origin.lng}`;\r\n googleMapsUrl += '&destination=' + encodeURIComponent(destination.name) +\r\n '&destination_place_id=' + destination.place_id;\r\n googleMapsUrl += '&travelmode=' + travelModeEnum.toLowerCase();\r\n return googleMapsUrl;\r\n }\r\n\r\n \/**\r\n * Handles changes to destination polyline and map icon stroke weight.\r\n *\/\r\n function changeMapObjectStrokeWeight(destination, mouseOver) {\r\n const destinationMarkerIcon = destination.marker.icon;\r\n if (mouseOver) {\r\n destination.polylines.outerStroke.setOptions({strokeWeight: 8});\r\n destinationMarkerIcon.strokeWeight = 2;\r\n destination.marker.setIcon(destinationMarkerIcon);\r\n }\r\n else {\r\n destination.polylines.outerStroke.setOptions({strokeWeight: 6});\r\n destinationMarkerIcon.strokeWeight = 1;\r\n destination.marker.setIcon(destinationMarkerIcon);\r\n }\r\n }\r\n\r\n \/**\r\n * Handles route clicks. Originally active routes are set to inactive\r\n * states. Newly selected route's map polyline\/marker objects and destination\r\n * template are assigned active class styling and coloring.\r\n *\/\r\n function handleRouteClick(destination, destinationIdx) {\r\n if (activeDestinationIndex !== undefined) {\r\n \/\/ Set currently active stroke to inactive\r\n destinations[activeDestinationIndex].polylines.innerStroke.setOptions(\r\n {strokeColor: STROKE_COLORS.inactive.innerStroke, zIndex: 2});\r\n destinations[activeDestinationIndex].polylines.outerStroke.setOptions(\r\n {strokeColor: STROKE_COLORS.inactive.outerStroke, zIndex: 1});\r\n\r\n \/\/ Set current active marker to grey\r\n destinations[activeDestinationIndex].marker.setIcon(\r\n destinationMarkerIcon);\r\n destinations[activeDestinationIndex].marker.label.color =\r\n MARKER_ICON_COLORS.inactive.label;\r\n\r\n \/\/ Remove styling of current active destination.\r\n const activeDestinationEl = destinationPanelEl.getActiveDestination();\r\n if (activeDestinationEl) {\r\n activeDestinationEl.classList.remove('active');\r\n }\r\n }\r\n\r\n activeDestinationIndex = destinationIdx;\r\n\r\n setTravelModeLayer(destination.travelModeEnum);\r\n \/\/ Add active class\r\n const newDestinationEl = destinationPanelEl.list.querySelectorAll(\r\n '.destination')[destinationIdx];\r\n newDestinationEl.classList.add('active');\r\n \/\/ Scroll into view\r\n newDestinationEl.scrollIntoView({behavior: 'smooth', block: 'center'});\r\n\r\n \/\/ Make line active\r\n destination.polylines.innerStroke.setOptions(\r\n {strokeColor: STROKE_COLORS.active.innerStroke, zIndex: 101});\r\n destination.polylines.outerStroke.setOptions(\r\n {strokeColor: STROKE_COLORS.active.outerStroke, zIndex: 99});\r\n\r\n destination.marker.setIcon(originMarkerIcon);\r\n destination.marker.label.color = '#ffffff';\r\n\r\n commutesMap.fitBounds(destination.bounds);\r\n }\r\n\r\n \/**\r\n * Generates new marker based on location and label.\r\n *\/\r\n function createMarker(location, label) {\r\n const isOrigin = label === undefined ? true : false;\r\n const markerIconConfig = isOrigin ? originMarkerIcon : destinationMarkerIcon;\r\n const labelColor = isOrigin ? MARKER_ICON_COLORS.active.label :\r\n MARKER_ICON_COLORS.inactive.label;\r\n const labelText = isOrigin ? '\u25cf' : label;\r\n\r\n const mapOptions = {\r\n position: location,\r\n map: commutesMap,\r\n label: {\r\n text: labelText,\r\n fontFamily: 'Arial, sans-serif',\r\n color: labelColor,\r\n fontSize: '16px',\r\n },\r\n icon: markerIconConfig\r\n };\r\n\r\n if (isOrigin) {\r\n mapOptions.label.className += ' origin-pin-label';\r\n mapOptions.label.fontSize = '20px';\r\n }\r\n const marker = new google.maps.Marker(mapOptions);\r\n\r\n return marker;\r\n }\r\n\r\n \/**\r\n * Returns a TravelMode enum parsed from the input string, or null if no match is found.\r\n *\/\r\n function parseTravelModeEnum(travelModeString) {\r\n switch (travelModeString) {\r\n case 'DRIVING':\r\n return TravelMode.DRIVING;\r\n case 'BICYCLING':\r\n return TravelMode.BICYCLING;\r\n case 'PUBLIC_TRANSIT':\r\n return TravelMode.TRANSIT;\r\n case 'WALKING':\r\n return TravelMode.WALKING;\r\n default:\r\n return null;\r\n }\r\n }\r\n\r\n \/**\r\n * Sets map layer depending on the chosen travel mode.\r\n *\/\r\n function setTravelModeLayer(travelModeEnum) {\r\n switch (travelModeEnum) {\r\n case TravelMode.BICYCLING:\r\n publicTransitLayer.setMap(null);\r\n bikeLayer.setMap(commutesMap);\r\n break;\r\n case TravelMode.TRANSIT:\r\n bikeLayer.setMap(null);\r\n publicTransitLayer.setMap(commutesMap);\r\n break;\r\n default:\r\n publicTransitLayer.setMap(null);\r\n bikeLayer.setMap(null);\r\n }\r\n }\r\n\r\n \/**\r\n * Convert time from durationValue in seconds into readable string text.\r\n *\/\r\n function convertDurationValueAsString(durationValue) {\r\n if (!durationValue) {\r\n return '';\r\n }\r\n if (durationValue < MIN_IN_SECONDS) {\r\n return '<1 min';\r\n }\r\n if (durationValue > HOUR_IN_SECONDS * 10) {\r\n return '10+ hours';\r\n }\r\n const hours = Math.floor(durationValue \/ HOUR_IN_SECONDS);\r\n const minutes = Math.floor(durationValue % HOUR_IN_SECONDS \/ 60);\r\n const hoursString = hours > 0 ? hours + ' h' : '';\r\n const minutesString = minutes > 0 ? minutes + ' min' : '';\r\n const spacer = hoursString && minutesString ? ' ' : '';\r\n return hoursString + spacer + minutesString;\r\n }\r\n\r\n \/**\r\n * Shows the destination modal window, saving a reference to the currently\r\n * focused element so that focus can be restored by hideModal().\r\n *\/\r\n function showModal() {\r\n lastActiveEl = document.activeElement;\r\n showElement(commutesEl.modal, destinationModalEl.destinationInput);\r\n }\r\n\r\n \/**\r\n * Hides the destination modal window, setting focus to focusEl if provided.\r\n * If no argument is passed, focus is restored to where it was when\r\n * showModal() was called.\r\n *\/\r\n function hideModal(focusEl) {\r\n hideElement(commutesEl.modal, focusEl || lastActiveEl);\r\n }\r\n }\r\n\r\n \/**\r\n * Hides a DOM element and optionally focuses on focusEl.\r\n *\/\r\n function hideElement(el, focusEl) {\r\n el.style.display = 'none';\r\n if (focusEl) focusEl.focus();\r\n }\r\n\r\n \/**\r\n * Shows a DOM element that has been hidden and optionally focuses on focusEl.\r\n *\/\r\n function showElement(el, focusEl) {\r\n el.style.display = 'flex';\r\n if (focusEl) focusEl.focus();\r\n }\r\n\r\n \/**\r\n * Event handler function for scroll buttons.\r\n *\/\r\n function handleScrollButtonClick(e) {\r\n const multiplier = 1.25;\r\n const direction = e.target.dataset.direction;\r\n const cardWidth = destinationPanelEl.list.firstElementChild.offsetWidth;\r\n\r\n destinationPanelEl.container.scrollBy(\r\n {left: (direction * cardWidth * multiplier), behavior: 'smooth'});\r\n }\r\n\r\n \/**\r\n * Event handler on scroll to add scroll buttons only if scroll width is larger\r\n * than width. Hide scroll buttons if scrolled to the start or end of the panel.\r\n *\/\r\n function handlePanelScroll() {\r\n const position = destinationPanelEl.container.scrollLeft;\r\n const scrollWidth = destinationPanelEl.container.scrollWidth;\r\n const width = destinationPanelEl.container.offsetWidth;\r\n\r\n if (scrollWidth > width) {\r\n if (position === 0) {\r\n destinationPanelEl.scrollLeftButton.classList.remove('visible');\r\n } else {\r\n destinationPanelEl.scrollLeftButton.classList.add('visible');\r\n }\r\n\r\n if (Math.ceil(position + width) >= scrollWidth) {\r\n destinationPanelEl.scrollRightButton.classList.remove('visible');\r\n } else {\r\n destinationPanelEl.scrollRightButton.classList.add('visible');\r\n }\r\n }\r\n }\r\n\r\n \/**\r\n * Generates new destination template based on destination info properties.\r\n *\/\r\n function generateDestinationTemplate(destination) {\r\n const travelModeIconTemplate = '<use href=\"#commutes-' +\r\n destination.travelModeEnum.toLowerCase() + '-icon\"\/>';\r\n return `\r\n <div class=\"destination\" tabindex=\"0\" role=\"button\">\r\n <div class=\"destination-content\">\r\n <div class=\"metadata\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">\r\n ${travelModeIconTemplate}\r\n <\/svg>\r\n ${destination.distance}\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">\r\n <use href=\"#commutes-arrow-icon\"\/>\r\n <\/svg>\r\n <span class=\"location-marker\">${destination.label}<\/span>\r\n <\/div>\r\n <div class=\"address\">To\r\n <abbr title=\"${destination.name}\">${destination.name}<\/abbr>\r\n <\/div>\r\n <div class=\"destination-eta\">${destination.duration}<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"destination-controls\">\r\n <a class=\"directions-button\" href=${destination.url} target=\"_blank\"\r\n aria-label=\"Link to directions in Google Maps\">\r\n <svg aria-label=\"Directions icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">\r\n <use href=\"#commutes-directions-icon\"\/>\r\n <\/svg>\r\n <\/a>\r\n <button class=\"edit-button\" aria-label=\"Edit Destination\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">\r\n <use href=\"#commutes-edit-icon\"\/>\r\n <\/svg>\r\n Edit\r\n <\/button>\r\n <\/div>`;\r\n }\r\n <\/script>\r\n <script>\r\n const CONFIGURATION = {\r\n \"defaultTravelMode\": \"DRIVING\",\r\n \"distanceMeasurementType\": \"IMPERIAL\",\r\n \"mapOptions\": {\"center\":{\"lat\":41.31375999999999,\"lng\":-73.1374318},\"fullscreenControl\":true,\"mapTypeControl\":false,\"streetViewControl\":false,\"zoom\":14,\"zoomControl\":true,\"maxZoom\":20,\"mapId\":\"\"},\r\n \"mapsApiKey\": \"AIzaSyCxVIjzQx3yOqQlUWLl3wmF6aXc5lp-_b4\"\r\n };\r\n\r\n function initMap() {\r\n new Commutes(CONFIGURATION);\r\n }\r\n <\/script>\r\n <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyCxVIjzQx3yOqQlUWLl3wmF6aXc5lp-_b4&callback=initMap&libraries=places,geometry&solution_channel=GMP_QB_commutes_v3_c\" async defer><\/script>\r\n <\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6ec54d3 e-flex e-con-boxed e-con e-parent\" data-id=\"6ec54d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1f7c4f elementor-widget elementor-widget-text-editor\" data-id=\"d1f7c4f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"\" data-start=\"206\" data-end=\"689\">At Creative Home Improvement LLC, we believe that your home should be a reflection of your unique style, needs, and aspirations. Whether you’re looking to remodel your kitchen, transform your bathroom, or give your entire home a fresh new look, we are here to <span class=\"TextRun SCXW160801975 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW160801975 BCX0\"> turn your dreams into reality<\/span><\/span>. With years of experience in the home improvement industry, <span class=\"TextRun SCXW150827298 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW150827298 BCX0\">We help countless homeowners<\/span><\/span> in <span class=\"TextRun SCXW158010943 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW158010943 BCX0\"> Fairfield County and the surrounding areas<\/span><\/span> create spaces they love, and we can do the same for you.<\/p><p class=\"\" data-start=\"691\" data-end=\"1155\">We understand that embarking on a home improvement project can feel overwhelming at times. There are so many decisions to make, from choosing the right materials to selecting the perfect design and ensuring the project stays within your budget. But you don\u2019t have to go through it alone. At Creative Home Improvement LLC, we are dedicated to working closely with you every step of the way, ensuring your vision is brought to life in the way you\u2019ve always imagined.<\/p><h2 data-start=\"1157\" data-end=\"1175\"><strong data-start=\"1157\" data-end=\"1175\">Why Choose Us?<\/strong><\/h2><p class=\"\" data-start=\"1177\" data-end=\"1656\">At Creative Home Improvement LLC, we are committed to providing the highest quality craftsmanship, exceptional customer service, and an experience that is second to none. We pride ourselves on our attention to detail, reliability, and ability to meet deadlines without compromising on quality. When you choose us for your next home improvement project, you’re not just hiring a contractor\u2014you’re partnering with a team of professionals who genuinely care about your satisfaction.<\/p><p class=\"\" data-start=\"1658\" data-end=\"1689\"><span class=\"TextRun SCXW77497872 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW77497872 BCX0\">Here is what makes us different:<\/span><\/span><\/p><ul data-start=\"1691\" data-end=\"2777\"><li class=\"\" data-start=\"1691\" data-end=\"1908\"><p class=\"\" data-start=\"1693\" data-end=\"1908\"><strong data-start=\"1693\" data-end=\"1722\">Expertise and Experience:<\/strong> With over a decade of experience, our team has seen and done it all. From small repairs to large scale remodels, we have the skills and knowledge to handle any project you can dream up.<\/p><\/li><li class=\"\" data-start=\"1909\" data-end=\"2114\"><p class=\"\" data-start=\"1911\" data-end=\"2114\"><strong data-start=\"1911\" data-end=\"1936\">Customized Solutions:<\/strong> Every home and every homeowner is unique. We take the time to understand your specific needs, preferences, and budget, and we create a customized plan that reflects your vision.<\/p><\/li><li class=\"\" data-start=\"2115\" data-end=\"2319\"><p class=\"\" data-start=\"2117\" data-end=\"2319\"><strong data-start=\"2117\" data-end=\"2141\">Attention to Detail:<\/strong> No detail is too small for us. Whether it\u2019s the color of your paint, the materials for your flooring, or the design of your kitchen cabinets, we make sure everything is perfect.<\/p><\/li><li class=\"\" data-start=\"2320\" data-end=\"2485\"><p class=\"\" data-start=\"2322\" data-end=\"2485\"><strong data-start=\"2322\" data-end=\"2346\">Clear Communication:<\/strong> We keep you informed at every stage of the project, ensuring that you are always in the loop and that any concerns are addressed promptly.<\/p><\/li><li class=\"\" data-start=\"2486\" data-end=\"2628\"><p class=\"\" data-start=\"2488\" data-end=\"2628\"><strong data-start=\"2488\" data-end=\"2514\">Honesty and Integrity:<\/strong> We believe in transparency, which means no hidden fees or surprises along the way. What we quote is what you pay.<\/p><\/li><li class=\"\" data-start=\"2629\" data-end=\"2777\"><p class=\"\" data-start=\"2631\" data-end=\"2777\"><strong data-start=\"2631\" data-end=\"2653\">Timely Completion:<\/strong> We understand how important your time is. We work efficiently to get the job done on schedule, without sacrificing quality.<\/p><\/li><\/ul><h2 data-start=\"2631\" data-end=\"2777\"><strong style=\"font-style: inherit;\" data-start=\"4878\" data-end=\"4931\">Our Process: Simple, Transparent, and Stress Free<\/strong><\/h2><p class=\"\" data-start=\"4933\" data-end=\"5185\">When you reach out to us, our goal is to make the entire process as smooth and stress free as possible. We take the time to understand your vision, provide expert advice, and deliver high quality work that exceeds your expectations. Here’s how we work:<\/p><ol data-start=\"5187\" data-end=\"6515\"><li class=\"\" data-start=\"5187\" data-end=\"5481\"><p class=\"\" data-start=\"5190\" data-end=\"5481\"><strong data-start=\"5190\" data-end=\"5215\">Initial Consultation:<\/strong> The first step is getting in touch with us. During your consultation, we\u2019ll listen carefully to your ideas, discuss your goals, and assess your home. We’ll help you understand what\u2019s possible within your budget and provide you with a rough timeline for the project.<\/p><\/li><li class=\"\" data-start=\"5486\" data-end=\"5752\"><p class=\"\" data-start=\"5489\" data-end=\"5752\"><strong data-start=\"5489\" data-end=\"5513\">Design and Planning:<\/strong> Once we\u2019ve discussed your vision, our team will create a detailed plan for your project. This includes drawings, material selections, and cost estimates. We\u2019ll walk you through the design to ensure that everything aligns with your vision.<\/p><\/li><li class=\"\" data-start=\"5754\" data-end=\"5928\"><p class=\"\" data-start=\"5757\" data-end=\"5928\"><strong data-start=\"5757\" data-end=\"5783\">Permits and Approvals:<\/strong> If your project requires permits, we\u2019ll take care of that for you. We handle all the necessary paperwork and make sure everything is up to code.<\/p><\/li><li class=\"\" data-start=\"5930\" data-end=\"6132\"><p class=\"\" data-start=\"5933\" data-end=\"6132\"><strong data-start=\"5933\" data-end=\"5950\">Construction:<\/strong> Once we have the final approval, we\u2019ll begin construction. Our team works efficiently and professionally, maintaining a clean worksite and minimizing disruptions to your daily life.<\/p><\/li><li class=\"\" data-start=\"6134\" data-end=\"6339\"><p class=\"\" data-start=\"6137\" data-end=\"6339\"><strong data-start=\"6137\" data-end=\"6159\">Final Walkthrough:<\/strong> After the work is completed, we do a final walkthrough to make sure everything is perfect. We\u2019ll address any concerns and ensure that you are completely satisfied with the result.<\/p><\/li><li class=\"\" data-start=\"6341\" data-end=\"6515\"><p class=\"\" data-start=\"6344\" data-end=\"6515\"><strong data-start=\"6344\" data-end=\"6364\">Ongoing Support:<\/strong> Even after your project is complete, we\u2019re here for you. If you have any questions or need assistance, we offer ongoing support and are happy to help.<\/p><\/li><\/ol><h3><strong data-start=\"6517\" data-end=\"6537\">Contact Us Today<\/strong><\/h3><p class=\"\" data-start=\"6539\" data-end=\"6885\">We are excited to help you transform your home into the dream space you\u2019ve always wanted. Whether you have a specific idea in mind or need some inspiration, we are here to help guide you through the process and provide expert advice. Our team is ready to listen to your ideas, answer your questions, and give you a free estimate for your project.<\/p><p class=\"\" data-start=\"6887\" data-end=\"7007\">So, if you\u2019re ready to get started, don\u2019t hesitate to contact us today! Together, we can make your dream home a reality.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1e9b086 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1e9b086\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5ed815d\" data-id=\"5ed815d\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ca55be9 elementor-widget__width-inherit elementor-widget-tablet__width-inherit elementor-widget elementor-widget-heading\" data-id=\"ca55be9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Contact us\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-0d06863 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"0d06863\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-c45a541 dspl_bx\" data-id=\"c45a541\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd25e5a e-con-full e-flex e-con e-child\" data-id=\"dd25e5a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-883bc12 elementor-widget__width-inherit elementor-widget-tablet__width-inherit elementor-widget elementor-widget-heading\" data-id=\"883bc12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\"> Address<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dedaa31 elementor-widget elementor-widget-text-editor\" data-id=\"dedaa31\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span class=\"TextRun SCXW235785813 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW235785813 BCX0\">Creative Home Improvement LLC, 37 Commodore Avenue, Shelton, CT 06484<\/span><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e5e90b elementor-widget__width-inherit elementor-widget-tablet__width-inherit elementor-widget elementor-widget-heading\" data-id=\"0e5e90b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">PHONE NUMBER <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf3484d elementor-widget elementor-widget-text-editor\" data-id=\"bf3484d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"tel:(203)%20929-5737\">(203) 929-5737<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65eca7a elementor-widget__width-inherit elementor-widget-tablet__width-inherit elementor-widget elementor-widget-heading\" data-id=\"65eca7a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">email<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5326e5 elementor-widget elementor-widget-text-editor\" data-id=\"f5326e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>andy@aware-ivory-orangutan.132-148-72-44.cpanel.site<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-fb85cc8 dspl_bx\" data-id=\"fb85cc8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e0e8c1a elementor-widget elementor-widget-shortcode\" data-id=\"e0e8c1a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\t\t<div data-elementor-type=\"container\" data-elementor-id=\"16246\" class=\"elementor elementor-16246\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdd377d e-flex e-con-boxed e-con e-parent\" data-id=\"fdd377d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27a8c54 elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"27a8c54\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"button_width":"50","step_next_label":"Next","step_previous_label":"Previous","step_type":"number_text","step_icon_shape":"circle"}\" data-widget_type=\"form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"New Form\" aria-label=\"New Form\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"16246\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"27a8c54\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"Home Improvement Services | Creative Home Improvement LLC\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"81\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tName\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-sm elementor-field-textual\" placeholder=\"Name\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tEmail\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-sm elementor-field-textual\" placeholder=\"Email\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-tel elementor-field-group elementor-column elementor-field-group-field_77f8ecf elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_77f8ecf\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tPhone Number\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<input size=\"1\" type=\"tel\" name=\"form_fields[field_77f8ecf]\" id=\"form-field-field_77f8ecf\" class=\"elementor-field elementor-size-sm elementor-field-textual\" placeholder=\"Phone Number\" required=\"required\" pattern=\"[0-9()#&+*-=.]+\" title=\"Only numbers and phone characters (#, -, *, etc) are accepted.\">\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_2d23e3c elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_2d23e3c\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tService\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field elementor-select-wrapper remove-before \">\n\t\t\t<div class=\"select-caret-down-wrapper\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-caret-down\" viewBox=\"0 0 571.4 571.4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M571 393Q571 407 561 418L311 668Q300 679 286 679T261 668L11 418Q0 407 0 393T11 368 36 357H536Q550 357 561 368T571 393Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t\t<select name=\"form_fields[field_2d23e3c]\" id=\"form-field-field_2d23e3c\" class=\"elementor-field-textual elementor-size-sm\" required=\"required\">\n\t\t\t\t\t\t\t\t\t<option value=\"Select\">Select<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Vinyl Siding\">Vinyl Siding<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Window Installation\">Window Installation<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Gutters Installation\">Gutters Installation<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Roofing Services\">Roofing Services<\/option>\n\t\t\t\t\t\t\t<\/select>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-message\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tMessage\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<textarea class=\"elementor-field-textual elementor-field elementor-size-sm\" name=\"form_fields[message]\" id=\"form-field-message\" rows=\"4\" placeholder=\"Message\"><\/textarea>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text\">\n\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[field_03092ff]\" id=\"form-field-field_03092ff\" class=\"elementor-field elementor-size-sm \" style=\"display:none !important;\">\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-50 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-md\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Send<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-39b6e7a e-flex e-con-boxed e-con e-parent\" data-id=\"39b6e7a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-386af6f elementor-widget elementor-widget-html\" data-id=\"386af6f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n \/\/ ====== CONFIG ======\r\n const NAME_SEL = '#form-field-name';\r\n const MSG_SEL = '#form-field-message';\r\n const NAME_MAX = 39; \/\/ \"less than 40\" => 39. Use 40 if you want max 40.\r\n const MSG_MAX = 250;\r\n\r\n \/\/ helper: get\/create inline msg node just after an input\/textarea\r\n function getMsg(el){\r\n let n = el.nextElementSibling;\r\n if (!n || !n.classList || !n.classList.contains('ef-msg')) {\r\n n = document.createElement('div');\r\n n.className = 'ef-msg';\r\n n.style.cssText = 'color:#e11d48;font-size:12px;margin-top:4px;display:none';\r\n el.insertAdjacentElement('afterend', n);\r\n }\r\n return n;\r\n }\r\n function setInvalid(el, text){\r\n const msg = getMsg(el);\r\n el.parentElement.classList.add('elementor-error');\r\n msg.textContent = text;\r\n msg.style.display = 'block';\r\n el.dataset.invalid = '1';\r\n }\r\n function clearInvalid(el){\r\n const msg = getMsg(el);\r\n el.parentElement.classList.remove('elementor-error');\r\n msg.textContent = '';\r\n msg.style.display = 'none';\r\n delete el.dataset.invalid;\r\n }\r\n\r\n \/\/ ====== NAME: letters + spaces only, < 40 chars ======\r\n const nameEl = document.querySelector(NAME_SEL);\r\n if (nameEl) {\r\n nameEl.setAttribute('maxlength', NAME_MAX); \/\/ hint for keyboards; paste still handled below\r\n\r\n nameEl.addEventListener('input', function () {\r\n const raw = nameEl.value;\r\n const hadNonLetter = \/[^A-Za-z\\s]\/.test(raw); \/\/ detect numbers\/symbols user tried to type\r\n\r\n \/\/ keep only letters & spaces; normalize multiple spaces\r\n let v = raw.replace(\/[^A-Za-z\\s]\/g, '').replace(\/\\s+\/g, ' ').trimStart();\r\n\r\n \/\/ hard cap for paste\r\n if (v.length > NAME_MAX) v = v.slice(0, NAME_MAX);\r\n\r\n if (v !== nameEl.value) nameEl.value = v;\r\n\r\n if (!v.trim()) {\r\n setInvalid(nameEl, 'Name is required.');\r\n } else if (hadNonLetter) {\r\n setInvalid(nameEl, 'Only letters and spaces are allowed.');\r\n } else if (v.length >= NAME_MAX) {\r\n setInvalid(nameEl, 'Limit reached (40 characters only)');\r\n } else {\r\n clearInvalid(nameEl);\r\n }\r\n });\r\n }\r\n\r\n \/\/ ====== MESSAGE: max 250 chars (no character-type restriction) ======\r\n const msgEl = document.querySelector(MSG_SEL);\r\n if (msgEl) {\r\n msgEl.setAttribute('maxlength', MSG_MAX);\r\n\r\n msgEl.addEventListener('input', function () {\r\n let v = msgEl.value;\r\n\r\n \/\/ hard cap for paste\r\n if (v.length > MSG_MAX) v = v.slice(0, MSG_MAX);\r\n if (v !== msgEl.value) msgEl.value = v;\r\n\r\n if (v.length >= MSG_MAX) {\r\n setInvalid(msgEl, 'Limit reached (250 characters only)');\r\n } else {\r\n clearInvalid(msgEl);\r\n }\r\n });\r\n }\r\n\r\n \/\/ ====== Block submit if any field is marked invalid ======\r\n document.addEventListener('submit', function (e) {\r\n const form = e.target;\r\n if (!form.matches('form.elementor-form')) return;\r\n\r\n const n = form.querySelector(NAME_SEL);\r\n const m = form.querySelector(MSG_SEL);\r\n\r\n if ((n && n.dataset.invalid === '1') || (m && m.dataset.invalid === '1')) {\r\n e.preventDefault();\r\n (n && n.dataset.invalid === '1' ? n : m).focus();\r\n }\r\n }, true);\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Together we can make the dream come true Nearby Amenities Neighborhood Discovery Show More Photo by Direction Map Locator Place […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_yoast_wpseo_title":"Contact Us | Creative Home | Home Remodeling Company","_yoast_wpseo_metadesc":"Contact Us for all your home renovation needs. We are here to answer questions and help with your project!","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"boxed","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_metasync_otto_title":"","_metasync_otto_description":"","_metasync_otto_keywords":"","_metasync_otto_og_title":"","_metasync_otto_og_description":"","_metasync_otto_twitter_title":"","_metasync_otto_twitter_description":"","rank_math_title":"","rank_math_description":"","_aioseo_title":"","_aioseo_description":"","_metasync_seo_title":"","_metasync_seo_desc":"","_metasync_otto_disabled":"","footnotes":""},"class_list":["post-587","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Contact Us | Creative Home | Home Remodeling Company<\/title>\n<meta name=\"description\" content=\"Contact Us for all your home renovation needs. We are here to answer questions and help with your project!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Contact\" \/>\n<meta property=\"og:description\" content=\"Contact Us for all your home renovation needs. We are here to answer questions and help with your project!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-05T09:13:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/search\/v11\/24px.svg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/#\\\/schema\\\/person\\\/b6120cc811e9ff9022a33884efef3964\"},\"headline\":\"Contact\",\"datePublished\":\"2025-02-11T08:50:39+00:00\",\"dateModified\":\"2026-05-05T09:13:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/\"},\"wordCount\":880,\"publisher\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fonts.gstatic.com\\\/s\\\/i\\\/googlematerialicons\\\/search\\\/v11\\\/24px.svg\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/\",\"url\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/\",\"name\":\"Contact Us | Creative Home | Home Remodeling Company\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fonts.gstatic.com\\\/s\\\/i\\\/googlematerialicons\\\/search\\\/v11\\\/24px.svg\",\"datePublished\":\"2025-02-11T08:50:39+00:00\",\"dateModified\":\"2026-05-05T09:13:11+00:00\",\"description\":\"Contact Us for all your home renovation needs. We are here to answer questions and help with your project!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/#primaryimage\",\"url\":\"https:\\\/\\\/fonts.gstatic.com\\\/s\\\/i\\\/googlematerialicons\\\/search\\\/v11\\\/24px.svg\",\"contentUrl\":\"https:\\\/\\\/fonts.gstatic.com\\\/s\\\/i\\\/googlematerialicons\\\/search\\\/v11\\\/24px.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/contact-us\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Contact\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/#website\",\"url\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/\",\"name\":\"Creative Home Improvement LLC\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/#organization\"},\"alternateName\":\"Creative, Home Improvement LLC, Home Improvement, Home Improvement Company\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/#organization\",\"name\":\"Creative Home Improvement LLC\",\"alternateName\":\"Creative, Home Improvement LLC, Home Improvement, Home Improvement Company\",\"url\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Image-1-1.jpg\",\"contentUrl\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Image-1-1.jpg\",\"width\":402,\"height\":280,\"caption\":\"Creative Home Improvement LLC\"},\"image\":{\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\\\/#\\\/schema\\\/person\\\/b6120cc811e9ff9022a33884efef3964\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f8b8f748552ba7c046bde12bde5f7b95dc2316dcbd83f4037b0ffbd1d34a34bd?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f8b8f748552ba7c046bde12bde5f7b95dc2316dcbd83f4037b0ffbd1d34a34bd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f8b8f748552ba7c046bde12bde5f7b95dc2316dcbd83f4037b0ffbd1d34a34bd?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\\\/\\\/aware-ivory-orangutan.132-148-72-44.cpanel.site\"]}]}<\/script>\n","yoast_head_json":{"title":"Contact Us | Creative Home | Home Remodeling Company","description":"Contact Us for all your home renovation needs. We are here to answer questions and help with your project!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/","og_locale":"en_US","og_type":"article","og_title":"Contact","og_description":"Contact Us for all your home renovation needs. We are here to answer questions and help with your project!","og_url":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/","article_modified_time":"2026-05-05T09:13:11+00:00","og_image":[{"url":"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/search\/v11\/24px.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/#article","isPartOf":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/"},"author":{"name":"admin","@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/#\/schema\/person\/b6120cc811e9ff9022a33884efef3964"},"headline":"Contact","datePublished":"2025-02-11T08:50:39+00:00","dateModified":"2026-05-05T09:13:11+00:00","mainEntityOfPage":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/"},"wordCount":880,"publisher":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/#organization"},"image":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/#primaryimage"},"thumbnailUrl":"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/search\/v11\/24px.svg","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/","url":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/","name":"Contact Us | Creative Home | Home Remodeling Company","isPartOf":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/#website"},"primaryImageOfPage":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/#primaryimage"},"image":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/#primaryimage"},"thumbnailUrl":"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/search\/v11\/24px.svg","datePublished":"2025-02-11T08:50:39+00:00","dateModified":"2026-05-05T09:13:11+00:00","description":"Contact Us for all your home renovation needs. We are here to answer questions and help with your project!","breadcrumb":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/#primaryimage","url":"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/search\/v11\/24px.svg","contentUrl":"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/search\/v11\/24px.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/contact-us\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/"},{"@type":"ListItem","position":2,"name":"Contact"}]},{"@type":"WebSite","@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/#website","url":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/","name":"Creative Home Improvement LLC","description":"","publisher":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/#organization"},"alternateName":"Creative, Home Improvement LLC, Home Improvement, Home Improvement Company","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/#organization","name":"Creative Home Improvement LLC","alternateName":"Creative, Home Improvement LLC, Home Improvement, Home Improvement Company","url":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/#\/schema\/logo\/image\/","url":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/wp-content\/uploads\/2025\/05\/Image-1-1.jpg","contentUrl":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/wp-content\/uploads\/2025\/05\/Image-1-1.jpg","width":402,"height":280,"caption":"Creative Home Improvement LLC"},"image":{"@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/#\/schema\/person\/b6120cc811e9ff9022a33884efef3964","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f8b8f748552ba7c046bde12bde5f7b95dc2316dcbd83f4037b0ffbd1d34a34bd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f8b8f748552ba7c046bde12bde5f7b95dc2316dcbd83f4037b0ffbd1d34a34bd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f8b8f748552ba7c046bde12bde5f7b95dc2316dcbd83f4037b0ffbd1d34a34bd?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site"]}]}},"_links":{"self":[{"href":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=587"}],"version-history":[{"count":219,"href":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/587\/revisions"}],"predecessor-version":[{"id":24788,"href":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/587\/revisions\/24788"}],"wp:attachment":[{"href":"https:\/\/aware-ivory-orangutan.132-148-72-44.cpanel.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}