{ const pos = { lat: position.coords.latitude, lng: position.coords.longitude }; this.map.setCenter(pos); }, () => { this.handleLocationError(true, this.map.getCenter()); }); } else { // Browser doesn't support Geolocation this.handleLocationError(false, this.map.getCenter()); } }, initMap: async function() { if (typeof google === 'undefined') { return } this.map = new google.maps.Map(this.$refs.mapContainer, { mapId: this.map_id, center: this.center, zoom: 4, maxZoom: 20, minZoom: 3, zoomControl: true, mapTypeControl: false, streetViewControl: false, scaleControl: false, fullscreenControl: false, cameraControl: false, gestureHandling: 'greedy', }); // Initialize autocomplete const input = this.$refs.searchInput; this.autocomplete = new google.maps.places.Autocomplete(input, { types: ['(regions)'], // Prioritize countries, cities, and regions fields: ['geometry', 'name', 'types'] // Include types for dynamic zoom }); this.autocomplete.addListener('place_changed', () => { const place = this.autocomplete.getPlace(); if (!place.geometry || !place.geometry.location) { console.error('No geometry available for selected place:', place.name); return; } const location = place.geometry.location; let zoomLevel = 15; // Default zoom if (place.types.includes('country')) { zoomLevel = 4; // Zoom out for countries } else if (place.types.includes('locality') || place.types.includes('sublocality')) { zoomLevel = 10; // City-level zoom } else if (place.types.includes('point_of_interest') || place.types.includes('establishment') || place.types.includes('street_address')) { zoomLevel = 15; // Close zoom for specific locations } this.map.setCenter(location); this.map.setZoom(zoomLevel); }); this.markers.forEach((data) => { // Define default and hover icon objects with explicit sizes const defaultSize = new google.maps.Size(32, 32); const hoverSize = new google.maps.Size(38, 38); const originalIcon = { url: data.icon, scaledSize: defaultSize }; const hoverIcon = { url: data.icon, scaledSize: hoverSize }; const marker = new google.maps.Marker({ map: this.map, position: data.position, icon: originalIcon, }); if (data.category == 'hq') { marker.optimized = false; // Disable optimization for HQ markers marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1); // Ensure HQ markers are on top } marker.addListener('mouseover', () => { marker.setIcon(hoverIcon); // Scroll corresponding element into view ONLY in the info list container const elId = `${data.position.lat}-${data.position.lng}`; const el = document.getElementById(elId); // Find the scrollable parent (the info list container) const scrollParent = document.getElementById('scrollCards'); if (el && scrollParent) { const parentRect = scrollParent.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const offset = elRect.top - parentRect.top + scrollParent.scrollTop; scrollParent.scrollTo({ top: offset, behavior: 'smooth' }); } // Add overlay to non-corresponding cards using Tailwind classes document.querySelectorAll('#scrollCards > div[id]').forEach(card => { if (card.id !== elId) { card.classList.add('opacity-75', 'blur-sm'); } else { card.classList.remove('opacity-75', 'blur-sm'); } }); }); // Add mobile-friendly event listeners marker.addListener('click', () => { marker.setIcon(hoverIcon); const elId = `${data.position.lat}-${data.position.lng}`; const el = document.getElementById(elId); const scrollParent = document.getElementById('scrollCards'); if (el && scrollParent) { const parentRect = scrollParent.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const offset = elRect.top - parentRect.top + scrollParent.scrollTop; scrollParent.scrollTo({ top: offset, behavior: 'smooth' }); } document.querySelectorAll('#scrollCards > div[id]').forEach(card => { if (card.id !== elId) { card.classList.add('opacity-75', 'blur-sm'); } else { card.classList.remove('opacity-75', 'blur-sm'); } }); // Optionally, remove overlay after a short delay for mobile setTimeout(() => { document.querySelectorAll('#scrollCards > div[id]').forEach(card => { card.classList.remove('opacity-75', 'blur-sm'); }); marker.setIcon(originalIcon); }, 2000); // 2 seconds }); marker.addListener('mouseout', () => { marker.setIcon(originalIcon); // Remove overlay from all cards document.querySelectorAll('#scrollCards > div[id]').forEach(card => { card.classList.remove('opacity-75', 'blur-sm'); }); }); this.markerInstances[`${data.position.lat}-${data.position.lng}`] = { isVisible: false, marker: marker, data: data }; }); google.maps.event.addListener(this.map, 'idle', () => { Object.entries(this.markerInstances).forEach(([key, { marker, data }]) => { const isVisible = this.map.getBounds()?.contains(data.position); if (isVisible) { this.markerInstances[key].isVisible = true; } else { this.markerInstances[key].isVisible = false; } }); }); } }" >