Add Firebase persistence and Google Maps integration for shared markers #2

2025-10-26T13:49:34-05:00

Copilot commented

2025-10-26 13:49:34 -05:00

(Migrated from github.com)

Implements real-time marker synchronization across users via Firebase Realtime Database and adds Google Maps API integration with toggle between grid and map views.

Changes

Firebase Integration

Added Firebase Realtime Database SDK for shared marker storage
Real-time listeners sync markers across all connected clients
Unique marker IDs enable proper tracking and deletion
Graceful fallback to localStorage when Firebase not configured

Google Maps Integration

Integrated Maps JavaScript API with toggle button (🗺️ Toggle Map View)
Bidirectional coordinate conversion between grid percentages and lat/lng using named constants (COORD_CONVERSION)
Custom pumpkin emoji markers rendered as SVG icons on Google Maps
Markers persist across view switches

Code Structure

// Coordinate conversion with named constants
const COORD_CONVERSION = {
    LAT_SCALE: 1000,
    LNG_SCALE: 1000,
    CENTER_OFFSET: 50
};

// Smart marker sync handles mixed coordinate types
function syncMarkersFromFirebase(data) {
    Object.values(data).forEach(markerData => {
        const hasLatLng = markerData.lat !== undefined && markerData.lng !== undefined;
        const hasXY = markerData.x !== undefined && markerData.y !== undefined;
        // Convert between coordinate systems as needed
    });
}

Configuration

config.example.js provides setup instructions for Firebase and Google Maps APIs
Google Maps script commented out by default to prevent placeholder key exposure
Configuration notice displayed when APIs not configured

Screenshots

Updated UI with toggle button:

Multiple markers with persistence:

Setup Required

Users must configure their own API keys:

Firebase: Project config in FIREBASE_CONFIG object
Google Maps: Uncomment script tag in index.html and add API key

App remains functional without configuration using localStorage as fallback.

Original prompt

Make the Markers persistent so everyone can see them, also allow a section of a map to be used from Google Maps.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Implements real-time marker synchronization across users via Firebase Realtime Database and adds Google Maps API integration with toggle between grid and map views. ## Changes ### Firebase Integration - Added Firebase Realtime Database SDK for shared marker storage - Real-time listeners sync markers across all connected clients - Unique marker IDs enable proper tracking and deletion - Graceful fallback to localStorage when Firebase not configured ### Google Maps Integration - Integrated Maps JavaScript API with toggle button (🗺️ Toggle Map View) - Bidirectional coordinate conversion between grid percentages and lat/lng using named constants (`COORD_CONVERSION`) - Custom pumpkin emoji markers rendered as SVG icons on Google Maps - Markers persist across view switches ### Code Structure ```javascript // Coordinate conversion with named constants const COORD_CONVERSION = { LAT_SCALE: 1000, LNG_SCALE: 1000, CENTER_OFFSET: 50 }; // Smart marker sync handles mixed coordinate types function syncMarkersFromFirebase(data) { Object.values(data).forEach(markerData => { const hasLatLng = markerData.lat !== undefined && markerData.lng !== undefined; const hasXY = markerData.x !== undefined && markerData.y !== undefined; // Convert between coordinate systems as needed }); } ``` ### Configuration - `config.example.js` provides setup instructions for Firebase and Google Maps APIs - Google Maps script commented out by default to prevent placeholder key exposure - Configuration notice displayed when APIs not configured ## Screenshots **Updated UI with toggle button:** ![UI with toggle](https://github.com/user-attachments/assets/991ff074-3b24-4f0d-ba44-01dc8ddd67c3) **Multiple markers with persistence:** ![Multiple markers](https://github.com/user-attachments/assets/0415c986-1c63-4a2c-8bba-7b30fabd8ff2) ## Setup Required Users must configure their own API keys: - Firebase: Project config in `FIREBASE_CONFIG` object - Google Maps: Uncomment script tag in `index.html` and add API key App remains functional without configuration using localStorage as fallback.  <details> <summary>Original prompt</summary> > Make the Markers persistent so everyone can see them, also allow a section of a map to be used from Google Maps. </details>  --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs.

SluberskiHomeLab (Migrated from github.com) requested changes

2025-10-26 14:45:27 -05:00

README.md

					
				@ -8,2 +8,4 @@

				- **Google Maps Integration**: Toggle between grid view and actual Google Maps

				- **Easy Marker Placement**: Click to mark your house location

				- **Remove Markers**: Click on any marker to remove it

				- **Shared Markers**: Markers are synchronized across all users in real-time using Firebase