show.map.js

show.map.js

// Function to show map using OpenStreetMap with Leaflet
      let map;
      let marker;
      
      function showMap(lat, lng, name) {
        mapContainer.style.display = 'flex';
        
        // If the map doesn't exist yet, create it
        if (!map) {
          map = L.map('map').setView([lat, lng], 15);
          
          // Add OpenStreetMap tile layer
          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: 19
          }).addTo(map);
          
          // Add control for fullscreen option
          L.control.zoom({
            position: 'topleft'
          }).addTo(map);
        } else {
          // If map already exists, just update the view
          map.setView([lat, lng], 15);
        }
        
        // Remove existing marker if any
        if (marker) map.removeLayer(marker);
        
        // Add new marker
        marker = L.marker([lat, lng]).addTo(map)
          .bindPopup(`<strong>${name}</strong>`)
          .openPopup();
          
        // Fix for map not displaying correctly in hidden container
        setTimeout(function() {
          map.invalidateSize();
        }, 100);
      }
      
      // Close map
      mapClose.addEventListener('click', function() {
        mapContainer.style.display = 'none';
      });
      
      // Search button click handler
      searchButton.addEventListener('click', async function() {
        const location = locationInput.value.trim();
        const category = categorySelect.value;
        const limit = limitInput.value || 9;
        
        if (!location) {
          alert('Please enter a location');
          return;
        }
        
        if (!foursquareApiKey) {
          apiKeyModal.style.display = 'flex';
          return;
        }
        
        const places = await fetchPlaces(location, category, limit);
        displayPlaces(places);
      });
      
      // Allow pressing Enter in the location input to trigger search
      locationInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          searchButton.click();
        }
      });
    });