diff --git a/dist/js/map.js b/dist/js/map.js index 6671491..1fe7918 100644 --- a/dist/js/map.js +++ b/dist/js/map.js @@ -60,74 +60,74 @@ function initMap() { showInfoWindowForStore(storeid, map, infoWindow, key); }); -// Create and add the search bar -const searchContainerId = mapDiv.getAttribute('data-search'); // Get the related search div ID -const searchContainer = document.getElementById(searchContainerId); - -if (searchContainer) { - const card = document.createElement('div'); - const input = document.createElement('input'); - const options = { types: ['address'] }; - - card.setAttribute('id', 'pac-card'); - input.setAttribute('id', 'pac-input'); - input.setAttribute('type', 'text'); - input.setAttribute('placeholder', 'Find a location'); - input.classList.add('form-control'); - card.appendChild(input); - - // Append the search bar to the searchContainer div - searchContainer.appendChild(card); - - const autocomplete = new google.maps.places.Autocomplete(input, options); - autocomplete.setFields(['address_components', 'geometry', 'name']); - - const originMarker = new google.maps.Marker({ map: map }); - originMarker.setVisible(false); - let originLocation = map.getCenter(); - - // Handle place changes - autocomplete.addListener('place_changed', async () => { - if (originMarker) { - originMarker.setMap(null); - } + // Create and add the search bar + const searchContainerId = mapDiv.getAttribute('data-search'); // Get the related search div ID + const searchContainer = document.getElementById(searchContainerId); + + if (searchContainer) { + const card = document.createElement('div'); + const input = document.createElement('input'); + const options = { types: ['address'] }; + + card.setAttribute('id', 'pac-card'); + input.setAttribute('id', 'pac-input'); + input.setAttribute('type', 'text'); + input.setAttribute('placeholder', 'Find a location'); + input.classList.add('form-control'); + card.appendChild(input); + + // Append the search bar to the searchContainer div + searchContainer.appendChild(card); + + const autocomplete = new google.maps.places.Autocomplete(input, options); + autocomplete.setFields(['address_components', 'geometry', 'name']); + + const originMarker = new google.maps.Marker({ map: map }); + originMarker.setVisible(false); + let originLocation = map.getCenter(); + + // Handle place changes + autocomplete.addListener('place_changed', async () => { + if (originMarker) { + originMarker.setMap(null); + } - originLocation = map.getCenter(); - const place = autocomplete.getPlace(); + originLocation = map.getCenter(); + const place = autocomplete.getPlace(); - if (!place.geometry) { - window.alert(`No address available for input: '${place.name}'`); - return; - } + if (!place.geometry) { + window.alert(`No address available for input: '${place.name}'`); + return; + } - originLocation = place.geometry.location; - map.setCenter(originLocation); + originLocation = place.geometry.location; + map.setCenter(originLocation); - const rankedStores = await calculateDistances(map.data, originLocation, unit); - const maxRadiusMeters = 96560; - const filteredStores = rankedStores.filter(store => store.distanceVal <= maxRadiusMeters); + const rankedStores = await calculateDistances(map.data, originLocation, unit); + const maxRadiusMeters = 96560; + const filteredStores = rankedStores.filter(store => store.distanceVal <= maxRadiusMeters); - showStoresList(map.data, filteredStores, panelId, map, infoWindow, key, unit); + showStoresList(map.data, filteredStores, panelId, map, infoWindow, key, unit); - const bounds = new google.maps.LatLngBounds(); - bounds.extend(originLocation); + const bounds = new google.maps.LatLngBounds(); + bounds.extend(originLocation); - filteredStores.forEach((store) => { - const storeFeature = map.data.getFeatureById(store.storeid); - const storeLocation = storeFeature.getGeometry().get(); - bounds.extend(storeLocation); - }); + filteredStores.forEach((store) => { + const storeFeature = map.data.getFeatureById(store.storeid); + const storeLocation = storeFeature.getGeometry().get(); + bounds.extend(storeLocation); + }); - map.fitBounds(bounds); + map.fitBounds(bounds); - map.maxDefaultZoom = 15; - google.maps.event.addListenerOnce(map, "bounds_changed", function () { - this.setZoom(Math.min(this.getZoom(), this.maxDefaultZoom)); - }); - }); -} else { - console.error(`Search container with ID ${searchContainerId} not found.`); -} + map.maxDefaultZoom = 15; + google.maps.event.addListenerOnce(map, "bounds_changed", function () { + this.setZoom(Math.min(this.getZoom(), this.maxDefaultZoom)); + }); + }); + } else { + console.error(`Search container with ID ${searchContainerId} not found.`); + } }); } @@ -181,27 +181,61 @@ async function calculateDistances(data, origin, unit) { return distancesList; } -// Show store info in an InfoWindow -function showInfoWindowForStore(storeid, map, infoWindow, key) { - const storeFeature = map.data.getFeatureById(storeid); - if (!storeFeature) { - console.log(`Store with ID ${storeid} not found.`); - return; - } +// Function to show the info window for a store +function showInfoWindowForStore(storeId, map, infoWindow, key) { + const store = map.data.getFeatureById(storeId); + const storeLocation = store.getGeometry().get(); + const storeName = decodeHTMLEntities(store.getProperty('name')); + let description = store.getProperty('description'); + const category = store.getProperty('category'); + const hours = store.getProperty('hours'); + const phone = store.getProperty('phone'); + const address = store.getProperty('address'); + + console.log('Store properties:', { + storeName, + description, + category, + hours, + phone + }); - const storeLocation = storeFeature.getGeometry().get(); - const category = storeFeature.getProperty('category'); - const storeName = storeFeature.getProperty('name'); - const description = storeFeature.getProperty('description') || ' '; - const hours = storeFeature.getProperty('hours') || 'Hours not available'; - const phone = storeFeature.getProperty('phone') || 'Phone not available'; + // Decode HTML entities if the properties exist + if (description) { + description = decodeHTMLEntities(description); + // Remove extra quotes from description + if (description.startsWith('"') && description.endsWith('"')) { + description = description.slice(1, -1); + } + } - const content = sanitizeHTML` + let content = `
${description}
-Category: ${category}
-Open: ${hours}
Phone: ${phone}
Address:
${decodeHTMLEntities(address)}
Get directions
${description}
`; + } + + if (category) { + content += `Category: ${decodeHTMLEntities(category)}
`; + } + + if (hours) { + content += `Open: ${decodeHTMLEntities(hours)}
`; + } + + if (phone) { + content += `Phone: ${decodeHTMLEntities(phone)}
`; + } + + content += ` +