\r\n
`\r\n\r\n return markup;\r\n }\r\n\r\n private createListElements() {\r\n var list = [],\r\n marker,\r\n // positionMarker = this.pharmacyFinder.positionMarker,\r\n bounds = this.pharmacyFinder._getBounds(1000000000, this.map);\r\n\r\n for (var i = 0; i < this.map.markers.length; i++) {\r\n marker = this.map.markers[i];\r\n\r\n if (this.pharmacyFinder._contains(marker.Latitude, marker.Longitude, bounds)) {\r\n // let value = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(marker.Latitude, marker.Longitude), positionMarker.getPosition());\r\n // if (this.usemiles)\r\n // value = (1.609344 / 1000);\r\n\r\n // marker.Distance_value = Math.round((value / 1000) * 10) / 10;\r\n list.push(marker);\r\n }\r\n }\r\n\r\n // list.sort((a, b) => {\r\n // return a.Distance_value - b.Distance_value;\r\n // });\r\n\r\n for (var i = 0; i < list.length; i++) {\r\n this.listElements += this.listItemMarkup(list[i]);\r\n }\r\n }\r\n\r\n private appendListElements() {\r\n this.listSelector.insertAdjacentHTML('afterbegin', this.listElements);\r\n const pharmacyItems = this.listSelector.querySelectorAll('.pharmacy-item');\r\n\r\n Array.from(pharmacyItems).forEach((element) => {\r\n let toggleDetailsBtn = \r\n ${btnVisibleText}\r\n ${btnCollapseText}\r\n \r\n
\r\n ${(isEmpty(Name)) ? \"\" : `${Name}
`}\r\n ${Street}, ${Postcode} ${City}\r\n ${(isEmpty(Phone)) ? \"\" : `${Phone}`}\r\n ${(isEmpty(Website)) ? \"\" : `${Website}`}\r\n\r\n ${(isEmpty(CultureRelatedDistance)) ? \"\" : `${CultureRelatedDistance}`}\r\n ${(isEmpty(CloseTime)) ? \"\" : ``}\r\n
\r\n \r\n ${Eucerin.isMobile ? `
` : \"\"} \r\n
\r\n ${openHoursTxt}
\r\n \r\n\r\n
`;\r\n\r\n if (this.pharmacyWrapperMobile) {\r\n setTimeout(() => {\r\n this.pharmacyWrapperMobile.innerHTML = pharmacyItemMarkup;\r\n this.pharmacyWrapperMobile.classList.add('expand-visible-area');\r\n this.addExpanderHandlersMobile();\r\n }, 300);\r\n }\r\n }\r\n\r\n private addExpanderHandlersMobile() {\r\n let toggleBtn = this.pharmacyWrapperMobile.querySelector('.toggle-btn');\r\n\r\n toggleBtn.addEventListener('click', (event) => {\r\n const target = \r\n ${i.querySelector('.text-visible').textContent}\r\n ${i.querySelector('.text-collapse').textContent}\r\n \r\n
\r\n ${i.querySelector('.name').textContent}
\r\n ${i.querySelector('.address').textContent}\r\n\r\n ${i.querySelector('.wrapper').innerHTML}\r\n
\r\n \r\n ${i.querySelector('.details').innerHTML}\r\n
\r\n ${this.getParmacyFinderMarkUp()}
`),\r\n pharmacyLayerContent = document.querySelector('.pharmacy-finder-layer .layer-overlay__content');\r\n\r\n if (!pharmacyLayerContent)\r\n return;\r\n pharmacyLayerContent.innerHTML = node.innerHTML;\r\n this.initMapOnLayer();\r\n }\r\n\r\n attachCloseBtnHandler() {\r\n const closeBtn = \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ${this.optionsWrapper}\r\n
\r\n \r\n
`\r\n } else {\r\n template = `- \r\n
- \r\n ${mapTabTitle}\r\n \r\n
- \r\n ${listTabTitle}\r\n \r\n
- \r\n
- \r\n \r\n \r\n \r\n
- \r\n \r\n\r\n\r\n \r\n\r\n \r\n \r\n
\r\n
`\r\n }\r\n\r\n return template\r\n }\r\n\r\n markPosition(map, latLng?: google.maps.LatLng, IconUrl?: URL) {\r\n if (latLng && (latLng.lat || latLng.lng)) {\r\n this.currentPosition = latLng;\r\n } else {\r\n this.currentPosition = map.getCenter();\r\n }\r\n\r\n let icon = {\r\n url: IconUrl || 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png',\r\n size: new google.maps.Size(34, 40),\r\n origin: new google.maps.Point(0, 0),\r\n anchor: new google.maps.Point(0, 40)\r\n };\r\n\r\n this.positionMarker = new google.maps.Marker({\r\n position: this.currentPosition,\r\n draggable: false,\r\n map: map,\r\n icon: icon\r\n });\r\n\r\n this.positionMarker.setPosition(this.currentPosition);\r\n }\r\n\r\n removeMarkedPosition(map) {\r\n this.positionMarker.setMap(map);\r\n this.positionMarker.setMap(null);\r\n }\r\n\r\n zoomChanged(mapSelector) {\r\n }\r\n\r\n idle(mapSelector) {\r\n if (mapSelector.getCenter()) {\r\n this.loadStores(mapSelector);\r\n }\r\n }\r\n\r\n mapOptions() {\r\n return {\r\n mapTypeId: google.maps.MapTypeId.ROADMAP,\r\n center: {\r\n lat: parseFloat(this.element.getAttribute('data-default-lat')) || 53.553534,\r\n lng: parseFloat(this.element.getAttribute('data-default-lng')) || 9.992995,\r\n },\r\n minZoom: 11, // 10km\r\n zoom: 14,\r\n styles: gMapStyles,\r\n panControl: false,\r\n streetViewControl: false,\r\n zoomControl: false,\r\n mapTypeControl: false,\r\n scaleControl: true,\r\n rotateControl: false,\r\n fullscreenControl: false,\r\n // gestureHandling: 'greedy'\r\n }\r\n }\r\n\r\n clusterOptions() {\r\n return {\r\n averageCenter: true,\r\n gridSize: 40,\r\n styles: [{\r\n anchor: [6, 0],\r\n anchorIcon: [40, 0],\r\n fontFamily: 'Roboto',\r\n height: 46,\r\n url: this.pharmacyTypes.ClusterIcon,\r\n textColor: '#525252',\r\n textSize: 16,\r\n width: 34\r\n }]\r\n }\r\n }\r\n}\r\n\r\nnew PharmacyFinder.setup();"],"sourceRoot":""}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ${this.optionsWrapper} \r\n
\r\n \r\n \r\n
\r\n