https://github.com/ecamlioglu/react-map-markers

Nextjs app for managing google maps with visgl/react-google-maps and state managed with zustand
https://github.com/ecamlioglu/react-map-markers

chakra-ui google-maps next nextjs zustand

Last synced: about 1 month ago
JSON representation

Nextjs app for managing google maps with visgl/react-google-maps and state managed with zustand

• Host: GitHub
• URL: https://github.com/ecamlioglu/react-map-markers
• Owner: ecamlioglu
• Created: 2024-08-07T14:41:48.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-13T07:07:26.000Z (5 months ago)
• Last Synced: 2024-11-09T21:29:19.393Z (3 months ago)
• Topics: chakra-ui, google-maps, next, nextjs, zustand
• Language: TypeScript
• Homepage: https://react-map-router.netlify.app/
• Size: 207 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Deploy website](https://github.com/ecamlioglu/react-map-markers/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/ecamlioglu/react-map-markers/actions/workflows/deploy.yml)

# React Map Markers

This project is a NextJS App project for creating and managing map markers using Google Maps API. It allows for adding, removing, and customizing markers, and includes functionalities for creating routes with saved locations. This library uses Zustand for state management and Chakra UI for styling components.

## Table of Contents

- [Features](#features)

- [Installation](#installation)

- [API Reference](#api-reference)

- [Contributing](#contributing)

- [CI/CD](#cicd)

- [Workflows](#workflows)

  

## Features

- Add and remove markers on Google Maps

- Customizable marker popups showing latitude and longitude

- Simple color selection panel for marker customization

- Route creation with saved locations

- State management with Zustand

- Styling with Chakra UI

## Installation

To install the package, you can use npm or yarn:

```bash

npm install react-map-markers @chakra-ui/react @emotion/react @emotion/styled framer-motion

or

yarn add react-map-markers @chakra-ui/react @emotion/react @emotion/styled framer-motion

```

## API Reference

I’ve used the Google Maps JS API with visgl/react-google-maps. If you need inspiration, check out their API examples to ensure this map documentation aligns with your vision too.

## Contributing

I welcome contributions to improve this library! If you have any suggestions, feature requests, or bug reports, please open an issue or submit a pull request. 

## CI/CD

I use GitHub Actions for continuous integration and continuous deployment. The CI/CD pipeline is defined in the .github/workflows directory. This workflow sending build result directly to Netlify.

## Workflows

Build: This workflow runs on every push and pull request to ensure the code builds correctly.

Deploy: This workflow runs on the main branch and deploys the application to the production environment.