import { Loader } from "https://esm.sh/@googlemaps/js-api-loader@1.16.2";
import ReactDOM from "https://esm.sh/react-dom@18.2.0";
import React from "https://esm.sh/react@18.2.0";
function App() {
const mapRef = React.useRef(null);
const [map, setMap] = React.useState(null);
const [center, setCenter] = React.useState({ lat: 40.7128, lng: -74.006 });
const [zoom, setZoom] = React.useState(10);
const [news, setNews] = React.useState([]);
const [locations, setLocations] = React.useState([]);
const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
const [error, setError] = React.useState(null);
const markersRef = React.useRef([]);
const [googleMaps, setGoogleMaps] = React.useState(null);
const [selectedLocation, setSelectedLocation] = React.useState(null);
const [searchQuery, setSearchQuery] = React.useState("");
const searchBoxRef = React.useRef(null);
React.useEffect(() => {
const initMap = async () => {
try {
const response = await fetch("/api/maps-key");
const { apiKey } = await response.json();
const loader = new Loader({
apiKey: apiKey,
version: "weekly",
libraries: ["places"],
});
const google = await loader.load();
setGoogleMaps(google.maps);
const newMap = new google.maps.Map(mapRef.current, {
center: center,
zoom: zoom,
mapTypeControl: false,
});
setMap(newMap);
const searchInput = document.getElementById("search-input");
const searchBox = new google.maps.places.SearchBox(searchInput);
searchBoxRef.current = searchBox;
newMap.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById("search-container"));
newMap.addListener("bounds_changed", () => {
searchBox.setBounds(newMap.getBounds());
});
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();
if (places.length === 0) return;
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (place.geometry && place.geometry.location) {
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
}
});
newMap.fitBounds(bounds);
newMap.setZoom(Math.min(newMap.getZoom(), 12));
setSearchQuery("");
});
newMap.addListener("idle", async () => {
const newCenter = newMap.getCenter();
setCenter({ lat: newCenter.lat(), lng: newCenter.lng() });
setZoom(newMap.getZoom());
const bounds = newMap.getBounds();
const ne = bounds.getNorthEast();
const sw = bounds.getSouthWest();
await fetchLocationsAndNews(sw.lat(), sw.lng(), ne.lat(), ne.lng());
});
} catch (error) {
console.error("Error initializing map:", error);