fix bugs in icon, search and location

Author: YuWei-CH

backend/README.md

@@ -37,3 +37,12 @@ Env vars:
 - `GEOCODING_USER_AGENT` (default `EasyRelocate/0.1 (local dev)`)
 - `NOMINATIM_BASE_URL` (default `https://nominatim.openstreetmap.org`)
 - `GEOCODING_TIMEOUT_S` (default `6`)
+
+### Google setup requirements
+If you use Google geocoding (`GEOCODING_PROVIDER=google` or `GOOGLE_MAPS_API_KEY` is set):
+- Enable **billing** for your Google Cloud project (Google Maps Platform)
+- Enable the **Geocoding API** in Google Cloud Console for that project
+
+If you see:
+`Google Geocoding failed with status REQUEST_DENIED: This API is not activated on your API project`
+it means the Geocoding API is not enabled (or billing/key restrictions are blocking it).

backend/app/geocoding.py

@@ -19,6 +19,18 @@
 GOOGLE_MAPS_API_KEY = os.getenv("GOOGLE_MAPS_API_KEY")
 
 
+class GeocodingError(RuntimeError):
+    pass
+
+
+class GeocodingConfigError(GeocodingError):
+    pass
+
+
+class GeocodingProviderError(GeocodingError):
+    pass
+
+
 @dataclass(frozen=True)
 class GeocodeResult:
     display_name: str
@@ -59,7 +71,7 @@ def _google_country_component() -> str | None:
 
 def _google_geocode_address(query: str, *, limit: int) -> list[GeocodeResult]:
     if not GOOGLE_MAPS_API_KEY:
-        return []
+        raise GeocodingConfigError("GOOGLE_MAPS_API_KEY is not set")
     q = query.strip()
     if not q:
         return []
@@ -78,9 +90,12 @@ def _google_geocode_address(query: str, *, limit: int) -> list[GeocodeResult]:
     data = res.json()
 
     if not isinstance(data, dict):
-        return []
-    if data.get("status") != "OK":
-        return []
+        raise GeocodingProviderError("Google Geocoding returned an invalid response")
+    status = data.get("status")
+    if status != "OK":
+        error_message = data.get("error_message")
+        extra = f": {error_message}" if isinstance(error_message, str) else ""
+        raise GeocodingProviderError(f"Google Geocoding failed with status {status}{extra}")
     results = data.get("results")
     if not isinstance(results, list):
         return []
@@ -110,7 +125,7 @@ def _google_geocode_address(query: str, *, limit: int) -> list[GeocodeResult]:
 
 def _google_reverse_geocode(lat: float, lng: float) -> ReverseGeocodeResult:
     if not GOOGLE_MAPS_API_KEY:
-        return ReverseGeocodeResult(display_name=None, address=None)
+        raise GeocodingConfigError("GOOGLE_MAPS_API_KEY is not set")
 
     params: dict[str, str] = {"latlng": f"{lat},{lng}", "key": GOOGLE_MAPS_API_KEY}
     res = httpx.get(
@@ -122,9 +137,12 @@ def _google_reverse_geocode(lat: float, lng: float) -> ReverseGeocodeResult:
     data = res.json()
 
     if not isinstance(data, dict):
-        return ReverseGeocodeResult(display_name=None, address=None)
-    if data.get("status") != "OK":
-        return ReverseGeocodeResult(display_name=None, address=None)
+        raise GeocodingProviderError("Google Geocoding returned an invalid response")
+    status = data.get("status")
+    if status != "OK":
+        error_message = data.get("error_message")
+        extra = f": {error_message}" if isinstance(error_message, str) else ""
+        raise GeocodingProviderError(f"Google Geocoding failed with status {status}{extra}")
     results = data.get("results")
     if not isinstance(results, list) or not results:
         return ReverseGeocodeResult(display_name=None, address=None)

backend/app/main.py

@@ -16,6 +16,8 @@
 from .geocoding import (
     approx_street_from_address,
     geocode_address,
+    GeocodingConfigError,
+    GeocodingProviderError,
     reverse_geocode,
     rough_location_from_address,
 )
@@ -101,7 +103,7 @@ def upsert_listing(payload: ListingUpsert, db: DbDep) -> Listing:
                     if candidates:
                         existing.lat = existing.lat or candidates[0].lat
                         existing.lng = existing.lng or candidates[0].lng
-                except HTTPError:
+                except (HTTPError, GeocodingConfigError, GeocodingProviderError):
                     pass
 
         if (
@@ -114,7 +116,7 @@ def upsert_listing(payload: ListingUpsert, db: DbDep) -> Listing:
                 rough = rough_location_from_address(rev.address)
                 if rough:
                     existing.location_text = rough
-            except HTTPError:
+            except (HTTPError, GeocodingConfigError, GeocodingProviderError):
                 pass
 
         db.add(existing)
@@ -145,15 +147,15 @@ def upsert_listing(payload: ListingUpsert, db: DbDep) -> Listing:
                 if candidates:
                     listing.lat = listing.lat or candidates[0].lat
                     listing.lng = listing.lng or candidates[0].lng
-            except HTTPError:
+            except (HTTPError, GeocodingConfigError, GeocodingProviderError):
                 pass
     if listing.location_text is None and listing.lat is not None and listing.lng is not None:
         try:
             rev = reverse_geocode(listing.lat, listing.lng, zoom=10)
             rough = rough_location_from_address(rev.address)
             if rough:
                 listing.location_text = rough
-        except HTTPError:
+        except (HTTPError, GeocodingConfigError, GeocodingProviderError):
             pass
     db.add(listing)
     db.commit()
@@ -184,12 +186,18 @@ def upsert_target(payload: TargetUpsert, db: DbDep) -> Target:
     lat = payload.lat
     lng = payload.lng
     address = payload.address.strip() if isinstance(payload.address, str) else None
+    if address == "":
+        address = None
 
     if lat is None or lng is None:
         try:
             candidates = geocode_address(address or "", limit=1)
         except HTTPError as e:
             raise HTTPException(status_code=502, detail=str(e)) from e
+        except GeocodingConfigError as e:
+            raise HTTPException(status_code=500, detail=str(e)) from e
+        except GeocodingProviderError as e:
+            raise HTTPException(status_code=502, detail=str(e)) from e
         if not candidates:
             raise HTTPException(status_code=404, detail="Address not found")
         lat = candidates[0].lat
@@ -244,6 +252,10 @@ def api_geocode(
         results = geocode_address(query, limit=limit)
     except HTTPError as e:
         raise HTTPException(status_code=502, detail=str(e)) from e
+    except GeocodingConfigError as e:
+        raise HTTPException(status_code=500, detail=str(e)) from e
+    except GeocodingProviderError as e:
+        raise HTTPException(status_code=502, detail=str(e)) from e
     return [GeocodeResultOut(display_name=r.display_name, lat=r.lat, lng=r.lng) for r in results]
 
 
@@ -257,6 +269,10 @@ def api_reverse_geocode(
         rev = reverse_geocode(lat, lng, zoom=zoom)
     except HTTPError as e:
         raise HTTPException(status_code=502, detail=str(e)) from e
+    except GeocodingConfigError as e:
+        raise HTTPException(status_code=500, detail=str(e)) from e
+    except GeocodingProviderError as e:
+        raise HTTPException(status_code=502, detail=str(e)) from e
     return ReverseGeocodeOut(
         display_name=rev.display_name,
         rough_location=rough_location_from_address(rev.address),

backend/app/schemas.py

@@ -64,10 +64,13 @@ def _validate_location(self) -> "TargetUpsert":
         has_lat = self.lat is not None
         has_lng = self.lng is not None
         has_address = self.address is not None and self.address.strip() != ""
+        has_coords = has_lat and has_lng
 
         if has_lat != has_lng:
             raise ValueError("lat and lng must be provided together")
-        if not (has_address or (has_lat and has_lng)):
+        if has_address and has_coords:
+            raise ValueError("Provide either address, or both lat and lng (not both)")
+        if not (has_address or has_coords):
             raise ValueError("Provide either address, or both lat and lng")
         return self
 

backend/tests/test_schemas.py

@@ -0,0 +1,40 @@
+import sys
+from pathlib import Path
+
+import pytest
+from pydantic import ValidationError
+
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
+
+
+def test_target_upsert_rejects_neither_address_nor_coords() -> None:
+    from app.schemas import TargetUpsert
+
+    with pytest.raises(ValidationError):
+        TargetUpsert(name="Workplace")
+
+
+def test_target_upsert_rejects_both_address_and_coords() -> None:
+    from app.schemas import TargetUpsert
+
+    with pytest.raises(ValidationError):
+        TargetUpsert(
+            name="Workplace",
+            address="690 E Middlefield Rd, Mountain View, CA 94043",
+            lat=37.4,
+            lng=-122.1,
+        )
+
+
+def test_target_upsert_accepts_address_only() -> None:
+    from app.schemas import TargetUpsert
+
+    TargetUpsert(name="Workplace", address="690 E Middlefield Rd, Mountain View, CA 94043")
+
+
+def test_target_upsert_accepts_coords_only() -> None:
+    from app.schemas import TargetUpsert
+
+    TargetUpsert(name="Workplace", lat=37.4, lng=-122.1)
+

docs/GOOGLE_MAPS_APPROX_LOCATION.md

@@ -35,6 +35,15 @@ Response includes:
 The UI requests this **on demand** (we don’t persist “street” in the database).
 
 ## Using Google Geocoding API (recommended for Google-maps Airbnb pages)
+### Requirements
+In Google Cloud Console, you must:
+1. **Enable billing** for the project (Google Maps Platform).
+2. **Enable the “Geocoding API”** on the same project as your API key.
+
+If you see an error like:
+`Google Geocoding failed with status REQUEST_DENIED: This API is not activated on your API project`
+it means the **Geocoding API is not enabled** (or billing/key restrictions are blocking it).
+
 Set these env vars before starting the backend:
 ```bash
 export GOOGLE_MAPS_API_KEY="YOUR_KEY"
@@ -53,11 +62,15 @@ source .venv/bin/activate
 uvicorn app.main:app --reload --port 8000
 ```
 
+### Common Google key setup notes
+- This project calls Google from the **backend** (server-to-server). If you restrict the key, prefer:
+  - Restrict by **API**: allow only **Geocoding API**
+  - Optionally restrict by **IP address** (for local dev, this can be inconvenient)
+
 ## Local dev env vars
 Backend env vars:
 - `GOOGLE_MAPS_API_KEY` (enables Google geocoding)
 - `GEOCODING_PROVIDER` (`google` or `nominatim`)
 - `GEOCODING_COUNTRY_CODES` (default `us`)
 - `ENABLE_GEOCODING` (default `1`)
 - `ENABLE_LISTING_GEOCODE_FALLBACK` (default `0`, if `1` will approximate coords from city/region text)
-

frontend/src/App.css

@@ -220,21 +220,47 @@
 }
 
 .marker {
-  width: 12px;
-  height: 12px;
+  width: 26px;
+  height: 26px;
   border-radius: 999px;
-  border: 2px solid #ffffff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.95);
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);
+  display: grid;
+  place-items: center;
+  color: #ffffff;
+  background: #64748b;
 }
 
 .marker.target {
+  width: 34px;
+  height: 34px;
   background: #ef4444;
+  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25), 0 6px 14px rgba(15, 23, 42, 0.25);
 }
 
 .marker.listing {
   background: #2563eb;
 }
 
+.marker.selected {
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25), 0 6px 14px rgba(15, 23, 42, 0.25);
+}
+
+.markerIcon {
+  width: 14px;
+  height: 14px;
+  transition: transform 120ms ease;
+}
+
+.marker.target .markerIcon {
+  width: 18px;
+  height: 18px;
+}
+
+.marker.selected .markerIcon {
+  transform: scale(1.15);
+}
+
 .landing {
   min-height: 100vh;
   display: flex;

frontend/src/MapView.tsx

@@ -39,6 +39,34 @@ const OSM_RASTER_STYLE: StyleSpecification = {
   layers: [{ id: 'osm', type: 'raster', source: 'osm' }],
 }
 
+const HOUSE_ICON_SVG = `
+<svg class="markerIcon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <path
+    d="M3 11.2L12 4l9 7.2V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1v-8.8Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linejoin="round"
+  />
+</svg>
+`.trim()
+
+const LAPTOP_ICON_SVG = `
+<svg class="markerIcon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <path
+    d="M6 5h12a2 2 0 0 1 2 2v8H4V7a2 2 0 0 1 2-2Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M2 17h20v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linejoin="round"
+  />
+</svg>
+`.trim()
+
 function isWithinUsBounds(lat: number, lng: number): boolean {
   return (
     lat >= US_BOUNDS[0][1] &&
@@ -127,7 +155,9 @@ export default function MapView({
     // create markers
     for (const p of points) {
       const el = document.createElement('div')
-      el.className = `marker ${p.kind}`
+      const isSelected = p.kind === 'listing' && p.id === selectedListingId
+      el.className = `marker ${p.kind}${isSelected ? ' selected' : ''}`
+      el.innerHTML = p.kind === 'target' ? LAPTOP_ICON_SVG : HOUSE_ICON_SVG
       el.style.cursor = p.kind === 'listing' && !isPickingTarget ? 'pointer' : 'default'
 
       const marker = new maplibregl.Marker({ element: el })
@@ -152,7 +182,7 @@ export default function MapView({
       map.fitBounds(bounds, { padding: 48, maxZoom: 13, duration: 450 })
       hasFitRef.current = fitKey
     }
-  }, [fitKey, isPickingTarget, onSelectListingId, points])
+  }, [fitKey, isPickingTarget, onSelectListingId, points, selectedListingId])
 
   useEffect(() => {
     const map = mapRef.current