https://github.com/bert27/map-markers_react

map with creation of markers through suggestions / Geocode reverse
https://github.com/bert27/map-markers_react

axios css flexbox google-maps-api hooks html5 marker react redux sass test

Last synced: about 2 months ago
JSON representation

map with creation of markers through suggestions / Geocode reverse

• Host: GitHub
• URL: https://github.com/bert27/map-markers_react
• Owner: bert27
• License: mit
• Created: 2021-06-04T22:11:58.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-06-06T15:42:44.000Z (almost 5 years ago)
• Last Synced: 2025-03-15T11:50:04.335Z (about 1 year ago)
• Topics: axios, css, flexbox, google-maps-api, hooks, html5, marker, react, redux, sass, test
• Language: JavaScript
• Homepage:
• Size: 208 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# map-markers_React

Mapa de google maps con diseño responsive.

Buscador con sugerencias.

Se van creando marcadores conforme se van seleccionando lugares.

///////////////

 Como instalar y ejecutar:

 

1. Descarga y descomprime el proyecto.

2. 2.Ejecute cmd y situaté dentro del directorio.

3. Una vez dentro de map-markers_React-main, escribe npm install para instalar todas las dependencias/ node-modules.

4. Una vez termine el proceso, solo falta escribir npm start.

5. Esto ejecutará el navegador y abrira el proyecto en localhost:3000.

//////////////////////

Explicación de la solución implementada:

El proyecto contiene una apiKey de googleMaps para el funcionamiento de los servicios de google, esta incluida en src/keyGoogleMaps.js

Incluye un test para comprobar que funciona correctamente.

Si deja de funcionar, cambiar la apiKey por una vuestra.

--

Al seleccionar un lugar en el mapa, se envía una petición a google con el lugar.

Mediante un servicio que ofrecen de geocoding devuelve las coordenadas.

Estas se guardan en un array de objetos en redux y a su vez se van visualizando en el mapa.

Cada marcador tiene un callback asociado al hacer click para poder añadir acciones en el fúturo.

--

El servicio de google devuelve más datos como las fotos asociadas a ese lugar y otros detalles.

La aplicación podría escalar a funcionalidades como guardar lugares favoritos con sus fotos para consultar después,

compartir restaurantes favoritos o descubrir lugares misteriosos junto con otros usuarios.