{"id":1812,"date":"2023-09-13T20:08:20","date_gmt":"2023-09-13T20:08:20","guid":{"rendered":"https:\/\/revolutionstudio.co.uk\/?page_id=1812"},"modified":"2024-09-24T19:47:38","modified_gmt":"2024-09-24T19:47:38","slug":"our-locations","status":"publish","type":"page","link":"https:\/\/revolutionstudio.co.uk\/ar\/our-locations\/","title":{"rendered":"\u0645\u0648\u0627\u0642\u0639\u0646\u0627"},"content":{"rendered":"<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-323a0f85 wp-block-group-is-layout-constrained\" style=\"padding-right:0;padding-left:0\">\n    <!-- START OF MAP BLOCK -->\n    \n\t<!-- HEAD -->\n\t<script>\n\t\tvar styledMapJson = [\n                {\n                    \"elementType\": \"geometry\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#f5f5f5\"\n                    }\n                    ]\n                },\n                {\n                    \"elementType\": \"labels.icon\",\n                    \"stylers\": [\n                    {\n                        \"visibility\": \"off\"\n                    }\n                    ]\n                },\n                {\n                    \"elementType\": \"labels.text.fill\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#616161\"\n                    }\n                    ]\n                },\n                {\n                    \"elementType\": \"labels.text.stroke\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#f5f5f5\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"administrative.land_parcel\",\n                    \"elementType\": \"labels.text.fill\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#bdbdbd\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"poi\",\n                    \"elementType\": \"geometry\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#eeeeee\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"poi\",\n                    \"elementType\": \"labels.text.fill\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#757575\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"poi.park\",\n                    \"elementType\": \"geometry\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#e5e5e5\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"poi.park\",\n                    \"elementType\": \"labels.text.fill\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#9e9e9e\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"road\",\n                    \"elementType\": \"geometry\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#ffffff\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"road.arterial\",\n                    \"elementType\": \"labels.text.fill\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#757575\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"road.highway\",\n                    \"elementType\": \"geometry\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#dadada\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"road.highway\",\n                    \"elementType\": \"labels.text.fill\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#616161\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"road.local\",\n                    \"elementType\": \"labels.text.fill\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#9e9e9e\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"transit.line\",\n                    \"elementType\": \"geometry\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#e5e5e5\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"transit.station\",\n                    \"elementType\": \"geometry\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#eeeeee\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"water\",\n                    \"elementType\": \"geometry\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#c9c9c9\"\n                    }\n                    ]\n                },\n                {\n                    \"featureType\": \"water\",\n                    \"elementType\": \"labels.text.fill\",\n                    \"stylers\": [\n                    {\n                        \"color\": \"#9e9e9e\"\n                    }\n                    ]\n                }\n        ];\n\n\t<\/script>\n\t<script src=\"https:\/\/polyfill.io\/v3\/polyfill.min.js?features=default\"><\/script>\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/handlebars\/4.7.7\/handlebars.min.js\"><\/script>\n\n\t<style>\n        html,\n        body {\n            height: 100%;\n            margin: 0;\n            padding: 0;\n        }\n\n        #map-container {\n            width: 100%;\n            height: 100%;\n            position: relative;\n            font-family: \"Roboto\", sans-serif;\n            box-sizing: border-box;\n        }\n\n        #map-container a {\n            text-decoration: none;\n            color: #1967d2;\n        }\n\n        #map-container button {\n            background: none;\n            color: inherit;\n            border: none;\n            padding: 0;\n            font: inherit;\n            font-size: inherit;\n            cursor: pointer;\n        }\n\n        #gmp-map {\n            position: absolute;\n            left: 22em;\n            top: 0;\n            right: 0;\n            bottom: 0;\n        }\n\n        #locations-panel {\n            position: absolute;\n            left: 0;\n            width: 22em;\n            top: 0;\n            bottom: 0;\n            overflow-y: auto;\n            background: white;\n            padding: 0.5em;\n            box-sizing: border-box;\n        }\n\n        @media only screen and (max-width: 876px) {\n            #gmp-map {\n            left: 0;\n            bottom: 50%;\n            }\n\n            #locations-panel {\n            top: 50%;\n            right: 0;\n            width: unset;\n            }\n        }\n\n        #locations-panel-list > header {\n            padding: 1.4em 1.4em 0 1.4em;\n        }\n\n        #locations-panel-list h1.search-title {\n            font-size: 1em;\n            font-weight: 500;\n            margin: 0;\n        }\n\n        #locations-panel-list h1.search-title > img {\n            vertical-align: bottom;\n            margin-top: -1em;\n        }\n\n        #locations-panel-list .search-input {\n            width: 100%;\n            margin-top: 0.8em;\n            position: relative;\n        }\n\n        #locations-panel-list .search-input input {\n            width: 100%;\n            border: 1px solid #80868b;\n            border-radius: 0.3em;\n            height: 2.7em;\n            box-sizing: border-box;\n            padding: 0 1em 0 2.5em;\n            font-size: 0.9em;\n        }\n\n        #locations-panel-list .search-input input:focus {\n            outline: 2px solid #1e88e5;\n        }\n\n        #locations-panel-list .search-input input::placeholder {\n            color: #212121;\n            opacity: 0.5;\n        }\n\n        #locations-panel-list .search-input-overlay {\n            position: absolute;\n        }\n\n        #locations-panel-list .search-input-overlay.search {\n            left: 2px;\n            top: 2px;\n            bottom: 2px;\n            width: 2.4em;\n        }\n\n        #locations-panel-list .search-input-overlay.search button {\n            width: 100%;\n            height: 100%;\n            border-radius: 0.2em;\n            color: black;\n            background: transparent;\n        }\n\n        #locations-panel-list .search-input-overlay.search .icon {\n            margin-top: 0.15em;\n            vertical-align: top;\n            width: 0.9em;\n        }\n\n        #locations-panel-list .section-name {\n            font-weight: 500;\n            font-size: 0.9em;\n            margin: 1.8em 0 1em 1.5em;\n        }\n\n        #locations-panel-list .location-result {\n            position: relative;\n            padding: 0.8em 3.5em 0.8em 1.4em;\n            border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n            cursor: pointer;\n        }\n\n        #locations-panel-list .location-result:first-of-type {\n            border-top: 1px solid rgba(0, 0, 0, 0.12);\n        }\n\n        #locations-panel-list .location-result:last-of-type {\n            border-bottom: none;\n        }\n\n        #locations-panel-list .location-result.selected {\n            outline: 2px solid #4285f4;\n        }\n\n        #locations-panel-list button.select-location {\n            margin-bottom: 0.6em;\n            text-align: left;\n        }\n\n        #locations-panel-list .location-result h2.name {\n            font-size: 1em;\n            font-weight: 500;\n            margin: 0;\n        }\n\n        #locations-panel-list .location-result .address {\n            font-size: 0.9em;\n            margin-bottom: 0.5em;\n            font-weight:400;\n        }\n\n        #locations-panel-list .directions-button {\n            position: absolute;\n            right: 1.2em;\n            top: 2.3em;\n        }\n\n        #locations-panel-list .directions-button-background:hover {\n            fill: rgba(116,120,127,0.1);\n        }\n\n        #locations-panel-list .directions-button-background {\n            fill: rgba(255,255,255,0.01);\n        }\n\n        #locations-panel-list .location-result .distance {\n            position: absolute;\n            top: 0.9em;\n            right: 0;\n            text-align: center;\n            font-size: 0.9em;\n            width: 5em;\n        }\n\n        \/* options *\/\n        #locations-panel-list .option-container {\n        display: inline-block;\n        margin: 0.2em 0;\n        position: relative;\n        vertical-align: top;\n        }\n\n        #locations-panel-list .option-container button:hover,\n        #locations-panel-list .option-container a:hover {\n        background-color: #f1f3f4;\n        }\n\n        #locations-panel-list .option {\n        border: 1px solid #e0e0e0;\n        border-radius: 1.3em;\n        color: #1967d2;\n        font-size: 0.9em;\n        font-weight: 500;\n        padding: 0.6em 0.7em;\n        }\n\n        #locations-panel-list .action-button .option {\n        align-items: center;\n        display: flex;\n        }\n\n        #locations-panel-list .action-button .open-icon {\n        \/* Match link color #1967d2 *\/\n        filter: invert(30%) sepia(67%) saturate(7379%) hue-rotate(209deg) brightness(95%) contrast(80%);\n        height: 1.2em;\n        margin-right: 0.4em;\n        }\n\n        #locations-panel-list .action-button span {\n        margin-right: 0.3em;\n        }\n\n        #location-results-list {\n            list-style-type: none;\n            margin: 0;\n            padding: 0;\n        }\n\n        \n    <\/style>\n\n    <script>\n      'use strict';\n\n      \/** Helper function to generate a Google Maps directions URL *\/\n      \/*\n      function generateDirectionsURL(origin, destination) {\n        const googleMapsUrlBase = 'https:\/\/www.google.com\/maps\/dir\/?';\n        const searchParams = new URLSearchParams('api=1');\n        searchParams.append('origin', origin);\n        const destinationParam = [];\n        \/\/ Add title to destinationParam except in cases where Quick Builder set\n        \/\/ the title to the first line of the address\n        if (destination.title !== destination.address1) {\n          destinationParam.push(destination.title);\n        }\n        destinationParam.push(destination.address1, destination.address2);\n        searchParams.append('destination', destinationParam.join(','));\n        return googleMapsUrlBase + searchParams.toString();\n      }\n      *\/\n\n      \/** Helper function to generate a Google Maps directions URL *\/\n      function generateDirectionsURL(origin, destination) {\n        const googleMapsUrlBase = 'https:\/\/www.google.com\/maps\/dir\/?';\n        const searchParams = new URLSearchParams('api=1');\n        searchParams.append('origin', origin);\n\n        \/\/ Use lat and lng for destination instead of address lines\n        const destinationLatLng = `${destination.coords.lat},${destination.coords.lng}`;\n        searchParams.append('destination', destinationLatLng);\n\n        return googleMapsUrlBase + searchParams.toString();\n      }\n\n      \/**\n       * Defines an instance of the Locator+ solution, to be instantiated\n       * when the Maps library is loaded.\n       *\/\n      function LocatorPlus(configuration) {\n        const locator = this;\n\n        locator.locations = configuration.locations || [];\n        locator.capabilities = configuration.capabilities || {};\n\n        const mapEl = document.getElementById('gmp-map');\n        const panelEl = document.getElementById('locations-panel');\n        locator.panelListEl = document.getElementById('locations-panel-list');\n        const sectionNameEl =\n            document.getElementById('location-results-section-name');\n        const resultsContainerEl = document.getElementById('location-results-list');\n\n        const itemsTemplate = Handlebars.compile(\n            document.getElementById('locator-result-items-tmpl').innerHTML);\n\n        locator.searchLocation = null;\n        locator.searchLocationMarker = null;\n        locator.selectedLocationIdx = null;\n        locator.userCountry = null;\n\n        \/\/ Initialize the map -------------------------------------------------------\n        const styledMapType = new google.maps.StyledMapType( styledMapJson );\n        locator.map = new google.maps.Map(mapEl, configuration.mapOptions);\n        \n        \/\/Associate the styled map with the MapTypeId and set it to display.\n        locator.map.mapTypes.set(\"styled_map\", styledMapType);\n        locator.map.setMapTypeId(\"styled_map\");\n\n        \/\/ Store selection.\n        const selectResultItem = function(locationIdx, panToMarker, scrollToResult) {\n          locator.selectedLocationIdx = locationIdx;\n          for (let locationElem of resultsContainerEl.children) {\n            locationElem.classList.remove('selected');\n            if (getResultIndex(locationElem) === locator.selectedLocationIdx) {\n              locationElem.classList.add('selected');\n              if (scrollToResult) {\n                panelEl.scrollTop = locationElem.offsetTop;\n              }\n            }\n          }\n          if (panToMarker && (locationIdx != null)) {\n            locator.map.panTo(locator.locations[locationIdx].coords);\n          }\n        };\n\n        \/\/ Create a marker for each location.\n        const markers = locator.locations.map(function(location, index) {\n          const marker = new google.maps.Marker({\n            position: location.coords,\n            map: locator.map,\n            title: location.title,\n          });\n          marker.addListener('click', function() {\n            selectResultItem(index, false, true);\n          });\n          return marker;\n        });\n\n        \/\/ Fit map to marker bounds.\n        locator.updateBounds = function() {\n          const bounds = new google.maps.LatLngBounds();\n          if (locator.searchLocationMarker) {\n            bounds.extend(locator.searchLocationMarker.getPosition());\n          }\n          for (let i = 0; i < markers.length; i++) {\n            bounds.extend(markers[i].getPosition());\n          }\n          locator.map.fitBounds(bounds);\n        };\n        if (locator.locations.length) {\n          locator.updateBounds();\n        }\n\n        \/\/ Get the distance of a store location to the user's location,\n        \/\/ used in sorting the list.\n        const getLocationDistance = function(location) {\n          if (!locator.searchLocation) return null;\n\n          \/\/ Use travel distance if available (from Distance Matrix).\n          if (location.travelDistanceValue != null) {\n            return location.travelDistanceValue;\n          }\n\n          \/\/ Fall back to straight-line distance.\n          return google.maps.geometry.spherical.computeDistanceBetween(\n              new google.maps.LatLng(location.coords),\n              locator.searchLocation.location);\n        };\n\n        \/\/ Render the results list --------------------------------------------------\n        const getResultIndex = function(elem) {\n          return parseInt(elem.getAttribute('data-location-index'));\n        };\n\n        locator.renderResultsList = function() {\n          let locations = locator.locations.slice();\n          for (let i = 0; i < locations.length; i++) {\n            locations[i].index = i;\n          }\n          if (locator.searchLocation) {\n            sectionNameEl.textContent =\n                'Nearest locations (' + locations.length + ')';\n            locations.sort(function(a, b) {\n              return getLocationDistance(a) - getLocationDistance(b);\n            });\n          } else {\n            sectionNameEl.textContent = `All locations (${locations.length})`;\n          }\n          const resultItemContext = {locations: locations};\n          resultsContainerEl.innerHTML = itemsTemplate(resultItemContext);\n          for (let item of resultsContainerEl.children) {\n            const resultIndex = getResultIndex(item);\n            if (resultIndex === locator.selectedLocationIdx) {\n              item.classList.add('selected');\n            }\n\n            const resultSelectionHandler = function() {\n              if (resultIndex !== locator.selectedLocationIdx) {\n                selectResultItem(resultIndex, true, false);\n              }\n            };\n\n            \/\/ Clicking anywhere on the item selects this location.\n            \/\/ Additionally, create a button element to make this behavior\n            \/\/ accessible under tab navigation.\n            item.addEventListener('click', resultSelectionHandler);\n            item.querySelector('.select-location')\n                .addEventListener('click', function(e) {\n                  resultSelectionHandler();\n                  e.stopPropagation();\n                });\n\n            \/\/ Clicking the directions button will open Google Maps directions in a\n            \/\/ new tab\n            const origin = (locator.searchLocation != null) ?\n                locator.searchLocation.location :\n                '';\n            const destination = locator.locations[resultIndex];\n            const googleMapsUrl = generateDirectionsURL(origin, destination);\n            item.querySelector('.directions-button')\n                .setAttribute('href', googleMapsUrl);\n          }\n        };\n\n        \/\/ Optional capability initialization --------------------------------------\n        initializeSearchInput(locator);\n        initializeDistanceMatrix(locator);\n\n        \/\/ Initial render of results -----------------------------------------------\n        locator.renderResultsList();\n      }\n\n      \/** When the search input capability is enabled, initialize it. *\/\n      function initializeSearchInput(locator) {\n        const geocodeCache = new Map();\n        const geocoder = new google.maps.Geocoder();\n\n        const searchInputEl = document.getElementById('location-search-input');\n        const searchButtonEl = document.getElementById('location-search-button');\n\n        const updateSearchLocation = function(address, location) {\n          if (locator.searchLocationMarker) {\n            locator.searchLocationMarker.setMap(null);\n          }\n          if (!location) {\n            locator.searchLocation = null;\n            return;\n          }\n          locator.searchLocation = {'address': address, 'location': location};\n          locator.searchLocationMarker = new google.maps.Marker({\n            position: location,\n            map: locator.map,\n            title: 'My location',\n            icon: {\n              path: google.maps.SymbolPath.CIRCLE,\n              scale: 12,\n              fillColor: '#3367D6',\n              fillOpacity: 0.5,\n              strokeOpacity: 0,\n            }\n          });\n\n          \/\/ Update the locator's idea of the user's country, used for units. Use\n          \/\/ `formatted_address` instead of the more structured `address_components`\n          \/\/ to avoid an additional billed call.\n          const addressParts = address.split(' ');\n          locator.userCountry = addressParts[addressParts.length - 1];\n\n          \/\/ Update map bounds to include the new location marker.\n          locator.updateBounds();\n\n          \/\/ Update the result list so we can sort it by proximity.\n          locator.renderResultsList();\n\n          locator.updateTravelTimes();\n        };\n\n        const geocodeSearch = function(query) {\n          if (!query) {\n            return;\n          }\n\n          const handleResult = function(geocodeResult) {\n            searchInputEl.value = geocodeResult.formatted_address;\n            updateSearchLocation(\n                geocodeResult.formatted_address, geocodeResult.geometry.location);\n          };\n\n          if (geocodeCache.has(query)) {\n            handleResult(geocodeCache.get(query));\n            return;\n          }\n          const request = {address: query, bounds: locator.map.getBounds()};\n          geocoder.geocode(request, function(results, status) {\n            if (status === 'OK') {\n              if (results.length > 0) {\n                const result = results[0];\n                geocodeCache.set(query, result);\n                handleResult(result);\n              }\n            }\n          });\n        };\n\n        \/\/ Set up geocoding on the search input.\n        searchButtonEl.addEventListener('click', function() {\n          geocodeSearch(searchInputEl.value.trim());\n        });\n\n        \/\/ Initialize Autocomplete.\n        initializeSearchInputAutocomplete(\n            locator, searchInputEl, geocodeSearch, updateSearchLocation);\n      }\n\n      \/** Add Autocomplete to the search input. *\/\n      function initializeSearchInputAutocomplete(\n          locator, searchInputEl, fallbackSearch, searchLocationUpdater) {\n        \/\/ Set up Autocomplete on the search input. Bias results to map viewport.\n        const autocomplete = new google.maps.places.Autocomplete(searchInputEl, {\n          types: ['geocode'],\n          fields: ['place_id', 'formatted_address', 'geometry.location']\n        });\n        autocomplete.bindTo('bounds', locator.map);\n        autocomplete.addListener('place_changed', function() {\n          const placeResult = autocomplete.getPlace();\n          if (!placeResult.geometry) {\n            \/\/ Hitting 'Enter' without selecting a suggestion will result in a\n            \/\/ placeResult with only the text input value as the 'name' field.\n            fallbackSearch(placeResult.name);\n            return;\n          }\n          searchLocationUpdater(\n              placeResult.formatted_address, placeResult.geometry.location);\n        });\n      }\n\n      \/** Initialize Distance Matrix for the locator. *\/\n      function initializeDistanceMatrix(locator) {\n        const distanceMatrixService = new google.maps.DistanceMatrixService();\n\n        \/\/ Annotate travel times to the selected location using Distance Matrix.\n        locator.updateTravelTimes = function() {\n          if (!locator.searchLocation) return;\n\n          const units = (locator.userCountry === 'USA') ?\n              google.maps.UnitSystem.IMPERIAL :\n              google.maps.UnitSystem.METRIC;\n          const request = {\n            origins: [locator.searchLocation.location],\n            destinations: locator.locations.map(function(x) {\n              return x.coords;\n            }),\n            travelMode: google.maps.TravelMode.DRIVING,\n            unitSystem: units,\n          };\n          const callback = function(response, status) {\n            if (status === 'OK') {\n              const distances = response.rows[0].elements;\n              for (let i = 0; i < distances.length; i++) {\n                const distResult = distances[i];\n                let travelDistanceText, travelDistanceValue;\n                if (distResult.status === 'OK') {\n                  travelDistanceText = distResult.distance.text;\n                  travelDistanceValue = distResult.distance.value;\n                }\n                const location = locator.locations[i];\n                location.travelDistanceText = travelDistanceText;\n                location.travelDistanceValue = travelDistanceValue;\n              }\n\n              \/\/ Re-render the results list, in case the ordering has changed.\n              locator.renderResultsList();\n            }\n          };\n          distanceMatrixService.getDistanceMatrix(request, callback);\n        };\n      }\n     <\/script>\n\n\t<script type=\"text\/javascript\">\n\t  var locationData = [\n    {\n        \"title\": \"Airdrie\",\n        \"address1\": \"Unit 1 - Block 2, Chapelhall Industrial Estate\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 55.8501206,\n            \"lng\": -3.9514162\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/airdrie\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Cumbernauld\",\n        \"address1\": \"10 Badenheath Pl\",\n        \"address2\": \"Westfield\",\n        \"coords\": {\n            \"lat\": 55.9278429,\n            \"lng\": -4.0548321\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/cumbernauld\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Dubai\",\n        \"address1\": \"Goshi Warehouse City, Warehouse - 01 19D Street - Al Quoz - Al Quoz Industrial Area 3 - Dubai\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 25.123083,\n            \"lng\": 55.218842\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/dubai\"\n            }\n        ]\n    },\n    {\n        \"title\": \"East Kilbride\",\n        \"address1\": \"14 Singer Road\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 55.7481937,\n            \"lng\": -4.1708391\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/east-kilbride\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Edinburgh\",\n        \"address1\": \"16 Annandale St\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 55.960164,\n            \"lng\": -3.184895\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/edinburgh\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Glasgow City Centre\",\n        \"address1\": \"310 St Vincent Street\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 55.8629898,\n            \"lng\": -4.2678413\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/glasgow-city-centre\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Glasgow Southside\",\n        \"address1\": \"28 Cogan Street\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 55.8217144,\n            \"lng\": -4.2987447\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/glasgow-southside\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Glasgow West End\",\n        \"address1\": \"1 Dowanside Lane\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 55.8751391,\n            \"lng\": -4.2944797\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/glasgow-west-end\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Kirkintilloch\",\n        \"address1\": \"Unit 8, 15 Campsie Rd\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 55.94195,\n            \"lng\": -4.164408\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/kirkintilloch\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Livingston\",\n        \"address1\": \"The Parkway Retail Square\",\n        \"address2\": \"Livingston\",\n        \"coords\": {\n            \"lat\": 55.8847119,\n            \"lng\": -3.518345\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/livingston\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Paisley\",\n        \"address1\": \"64-74 Abercorn Street\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 55.851606,\n            \"lng\": -4.420969\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/paisley\"\n            }\n        ]\n    },\n    {\n        \"title\": \"Stirling\",\n        \"address1\": \"Unit 1, 15 Borrowmeadow Road\",\n        \"address2\": \"\",\n        \"coords\": {\n            \"lat\": 56.116817,\n            \"lng\": -3.915356\n        },\n        \"actions\": [\n            {\n                \"label\": \"Book now\",\n                \"defaultUrl\": \"\\\/location\\\/stirling\"\n            }\n        ]\n    }\n];\n\t  console.log( locationData );\n\t<\/script>\n    <script>\n      const CONFIGURATION = {\n        \"locations\": locationData,\n        \"mapOptions\": {\n            \"center\":{\"lat\":38.0,\"lng\":-100.0},\n            \"fullscreenControl\":true,\n            \"mapTypeControl\":false,\n            \"mapTypeControlOptions\": {\n                 \"mapTypeIds\": [\"styled_map\"],\n            },\n            \"streetViewControl\":false,\n            \"zoom\":4,\n            \"zoomControl\":true,\n            \"maxZoom\":17,\n            \"mapId\":\"\"\n        },\n        \"mapsApiKey\": \"AIzaSyBGPYhz8lOEOTd2oLkezgsWIZH7Mvr9Jbw\",\n        \"capabilities\": {\"input\":true,\"autocomplete\":true,\"directions\":false,\"distanceMatrix\":true,\"details\":false,\"actions\":false}\n      };\n\n      function initMap() {\n        new LocatorPlus(CONFIGURATION);\n      }\n    <\/script>\n    <script id=\"locator-result-items-tmpl\" type=\"text\/x-handlebars-template\">\n      {{#each locations}}\n        <li class=\"location-result\" data-location-index=\"{{index}}\">\n          <button class=\"select-location\">\n            <h2 class=\"name\">{{title}}<\/h2>\n          <\/button>\n          <div class=\"address\">{{address1}}<br>{{address2}}<\/div>\n          <div class=\"options\">\n            {{#each actions}}\n              {{#if defaultUrl}}\n                <div class=\"option-container\">\n                  <div class=\"action-button\">\n                      <a href=\"{{defaultUrl}}\" target=\"_blank\" class=\"option\">\n                        <img decoding=\"async\" class=\"open-icon\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/open_in_new\/v16\/24px.svg\" alt=\"open in new window\"\/>\n                        <span>{{label}}<\/span>\n                      <\/a>\n                  <\/div>\n                <\/div>\n              {{\/if}}\n            {{\/each}}\n          <\/div>\n\n          {{#if travelDistanceText}}\n            <div class=\"distance\">{{travelDistanceText}}<\/div>\n          {{\/if}}\n          <a class=\"directions-button\" href=\"\" target=\"_blank\" title=\"Get directions to this location on Google Maps\">\n            <svg width=\"34\" height=\"34\" viewBox=\"0 0 34 34\"\n                  fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M17.5867 9.24375L17.9403 8.8902V8.8902L17.5867 9.24375ZM16.4117 9.24375L16.7653 9.59731L16.7675 9.59502L16.4117 9.24375ZM8.91172 16.7437L8.55817 16.3902L8.91172 16.7437ZM8.91172 17.9229L8.55817 18.2765L8.55826 18.2766L8.91172 17.9229ZM16.4117 25.4187H16.9117V25.2116L16.7652 25.0651L16.4117 25.4187ZM16.4117 25.4229H15.9117V25.63L16.0582 25.7765L16.4117 25.4229ZM25.0909 17.9229L25.4444 18.2765L25.4467 18.2742L25.0909 17.9229ZM25.4403 16.3902L17.9403 8.8902L17.2332 9.5973L24.7332 17.0973L25.4403 16.3902ZM17.9403 8.8902C17.4213 8.3712 16.5737 8.3679 16.0559 8.89248L16.7675 9.59502C16.8914 9.4696 17.1022 9.4663 17.2332 9.5973L17.9403 8.8902ZM16.0582 8.8902L8.55817 16.3902L9.26527 17.0973L16.7653 9.5973L16.0582 8.8902ZM8.55817 16.3902C8.0379 16.9105 8.0379 17.7562 8.55817 18.2765L9.26527 17.5694C9.13553 17.4396 9.13553 17.227 9.26527 17.0973L8.55817 16.3902ZM8.55826 18.2766L16.0583 25.7724L16.7652 25.0651L9.26517 17.5693L8.55826 18.2766ZM15.9117 25.4187V25.4229H16.9117V25.4187H15.9117ZM16.0582 25.7765C16.5784 26.2967 17.4242 26.2967 17.9444 25.7765L17.2373 25.0694C17.1076 25.1991 16.895 25.1991 16.7653 25.0694L16.0582 25.7765ZM17.9444 25.7765L25.4444 18.2765L24.7373 17.5694L17.2373 25.0694L17.9444 25.7765ZM25.4467 18.2742C25.9631 17.7512 25.9663 16.9096 25.438 16.3879L24.7354 17.0995C24.8655 17.2279 24.8687 17.4363 24.7351 17.5716L25.4467 18.2742Z\" fill=\"#1967d2\"\/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19 19.8333V17.75H15.6667V20.25H14V16.9167C14 16.4542 14.3708 16.0833 14.8333 16.0833H19V14L21.9167 16.9167L19 19.8333Z\" fill=\"#1967d2\"\/>\n              <circle class=\"directions-button-background\" cx=\"17\" cy=\"17\" r=\"16.5\" stroke=\"#e0e0e0\"\/>\n            <\/svg>\n          <\/a>\n        <\/li>\n      {{\/each}}\n    <\/script>\n\t<!-- \/ HEAD -->\n\n\n\n\t<!-- HTML -->\n\t<div id=\"map-container\">\n      <div id=\"locations-panel\">\n        <div id=\"locations-panel-list\">\n          <header>\n            <h1 class=\"search-title\">\n              <img decoding=\"async\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/place\/v15\/24px.svg\"\/>\n              \u0627\u0628\u062d\u062b \u0639\u0646 \u0645\u0648\u0642\u0639 \u0642\u0631\u064a\u0628 \u0645\u0646\u0643\n            <\/h1>\n            <div class=\"search-input\">\n              <input id=\"location-search-input\" placeholder=\"\u0623\u062f\u062e\u0644 \u0639\u0646\u0648\u0627\u0646\u0643 \u0623\u0648 \u0627\u0644\u0631\u0645\u0632 \u0627\u0644\u0628\u0631\u064a\u062f\u064a\">\n              <div id=\"search-overlay-search\" class=\"search-input-overlay search\">\n                <button id=\"location-search-button\">\n                  <img decoding=\"async\" class=\"icon\" src=\"https:\/\/fonts.gstatic.com\/s\/i\/googlematerialicons\/search\/v11\/24px.svg\" alt=\"Search\"\/>\n                <\/button>\n              <\/div>\n            <\/div>\n          <\/header>\n          <div class=\"section-name\" id=\"location-results-section-name\">\n            \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0648\u0627\u0642\u0639\n          <\/div>\n          <div class=\"results\">\n            <ul id=\"location-results-list\"><\/ul>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div id=\"gmp-map\"><\/div>\n    <\/div>\n    <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBGPYhz8lOEOTd2oLkezgsWIZH7Mvr9Jbw&#038;callback=initMap&#038;libraries=places,geometry&#038;solution_channel=GMP_QB_locatorplus_v7_cABD\" async defer><\/script>\n\n\n\t<style>\n\t\tdiv#map-container {\n\t\t\theight: 100vh;\n\t\t\twidth: 100%;\n\t\t\tmax-width: 100%;\n\t\t}\n\t<\/style>\n\t<!-- END OF MAP BLOCK -->\n    <\/div>\n\n\n\n<style>\ndiv#map-container {\n    height: calc(100vh - 120px);\n    width: 100%;\n    max-width: 100%;\n    font-family: inherit;\n}\ndiv#search-overlay-search {\n    display: none;\n}\n#locations-panel-list .search-input input {\n    padding-left: 1em;\n}\n#locations-panel-list h1.search-title {\n    display: flex;\n    align-items: center;\n}\n#locations-panel-list h1.search-title > img {\n    margin-top: 0;\n    margin-right: 5px;\n}\ndiv#locations-panel {\n    background: rgba(247, 247, 247, 0.64);\n}\n#locations-panel-list .location-result {\n    border: none !important;\n    margin-left: 0;\n}\n#locations-panel-list .action-button .open-icon {\n    display: none;\n}\n#locations-panel-list .option {\n    border-radius: 0;\n    border-color: var(--wp--preset--color--primary);\n    font-weight: bold;\n    text-transform: uppercase;\n    font-family: inherit !important;\n    padding: 0.45rem 1.6125rem !important;\n    background: var(--wp--preset--color--primary);\n}\n#locations-panel-list .action-button span {\n    font-family: var(--wp--preset--font-family--heading);\n    font-weight: bold;\n    font-size: 13px;\n    color: #fff;\n}\n#locations-panel-list .option:hover span {\n    color: #000 !important;\n}\na.directions-button svg path {\n    fill: var(--wp--preset--color--primary);\n}\n#locations-panel-list .location-result.selected {\n    outline: 2px solid var(--wp--preset--color--primary);\n}\n<\/style>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"no-title","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1812","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/revolutionstudio.co.uk\/ar\/wp-json\/wp\/v2\/pages\/1812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/revolutionstudio.co.uk\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/revolutionstudio.co.uk\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/revolutionstudio.co.uk\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/revolutionstudio.co.uk\/ar\/wp-json\/wp\/v2\/comments?post=1812"}],"version-history":[{"count":31,"href":"https:\/\/revolutionstudio.co.uk\/ar\/wp-json\/wp\/v2\/pages\/1812\/revisions"}],"predecessor-version":[{"id":2310,"href":"https:\/\/revolutionstudio.co.uk\/ar\/wp-json\/wp\/v2\/pages\/1812\/revisions\/2310"}],"wp:attachment":[{"href":"https:\/\/revolutionstudio.co.uk\/ar\/wp-json\/wp\/v2\/media?parent=1812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}