Interaktywna mapa partnerów oparta na Google Maps z filtrowaniem i wyborem według parametrów

Jest bot Telegram, w którym przechowywana jest baza partnerów (florystów) z całego świata.

Każdy partner ma:

• nazwa
• koordynaty (punkt Google Maps)
• telefon / kontakt
• ocena (aktualizowana dynamicznie)
• ceny / poziom cen
• obecność depozytu
• obecność zniżek
• jakość florystyki
• dodatkowe parametry

Wszystkie dane są już zorganizowane w systemie (bocie).

Zadanie:

Opracować interfejs webowy (lub aplikację webową), który wizualizuje wszystkich partnerów na mapie (bazując na Google Maps z już znanym i zrozumiałym interfejsem, aby wszystko było znajome), i pozwala menedżerowi:

1. Wprowadzić adres dostawy

2. Zobaczyć na mapie najbliższych partnerów

3. Szybko porównać ich według parametrów

4. Podjąć decyzję, kogo wybrać

Funkcjonalność:

1. Mapa (Google Maps API)

• wyświetlanie wszystkich partnerów jako znaczników
• klasteryzacja przy powiększeniu
• standardowy UX jak w Google Maps (powiększanie, przeciąganie)

2. Wyszukiwanie po adresie

• wprowadzenie adresu (autouzupełnianie)
• ustawienie punktu dostawy
• wyświetlanie promienia (na przykład 3–5 km)

3. Odległość

• obliczenie odległości od punktu dostawy do każdego partnera (trasa, a nie w linii prostej)
• sortowanie według odległości

4. Karta partnera (po kliknięciu na znacznik)

• nazwa
• ocena
• odległość
• telefon / kontakt
• poziom cen
• depozyt (tak/nie)
• zniżki (tak/nie)
• krótkie podsumowanie jakości

5. Pasek boczny (bardzo ważne)

• lista najbliższych partnerów
• sortowanie:
  • według odległości
  • według oceny
  • według ceny
• filtry:
  • minimalna ocena
  • obecność depozytu
  • zakres cenowy

6. Porównanie

• możliwość otwarcia 2–5 partnerów jednocześnie
• wizualne porównanie parametrów

7. Integracja

• uzyskiwanie danych przez API (bot / baza)

⸻

Dodatkowo (pożądane):

• kolorowa indikacja znaczników:
  • zielony — wysoka ocena
  • żółty — średnia
  • czerwony — niska
• szybki wybór “najlepszego partnera”
• logika “polecanego partnera”

Wynik:

• działająca aplikacja webowa
• możliwość otwarcia przez link
• połączenie z danymi partnerów

⸻

Ważne:

Interfejs powinien być maksymalnie szybki, prosty i jak najbardziej podobny do Google Maps.

To narzędzie dla menedżerów, a nie produkt dla klientów.

⸻

2. Jak najlepiej zrealizować (bardzo ważne)

Opcja 1 — najwłaściwsza (polecam)

Google Maps + React

Dlaczego:

• menedżerowie już znają interfejs
• minimalne szkolenie
• maksymalnie szybkie wdrożenie

Stos technologiczny:

• Google Maps JavaScript API
• Places API (do adresu)
• Distance Matrix API (odległość)

Co się uda:

• wprowadzasz adres → mapa się centrowa
• pokazują się najbliżsi partnerzy
• po prawej stronie lista → jak w Uber / Bolt

Również rozważę Twoje propozycje i pomysły