https://github.com/baroshem/map

🗺 Map Module for Nuxt 3
https://github.com/baroshem/map

google leaflet map module nuxt openstreetmap

Last synced: about 2 months ago
JSON representation

🗺 Map Module for Nuxt 3

• Host: GitHub
• URL: https://github.com/baroshem/map
• Owner: Baroshem
• License: mit
• Created: 2022-01-23T13:46:18.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-28T11:15:38.000Z (over 2 years ago)
• Last Synced: 2024-04-25T19:20:31.944Z (8 months ago)
• Topics: google, leaflet, map, module, nuxt, openstreetmap
• Language: Vue
• Homepage: https://map.nuxtjs.org
• Size: 1.81 MB
• Stars: 10
• Watchers: 4
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
[![@nuxtjs/map](https://map.nuxtjs.org/preview.png)](https://map.nuxtjs.org)

# @nuxtjs/map

[![npm version][npm-version-src]][npm-version-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]

[![Codecov][codecov-src]][codecov-href]

[![License][license-src]][license-href]

> Map module for [Nuxt](https://v3.nuxtjs.org)

- [✨  Release Notes](https://github.com/nuxt-community/map-module/releases)

- [📖  Read the documentation](https://map.nuxtjs.org)

## Features

- Nuxt 3 ready

- Easy integration with Google Maps & Leaflet

- Use only two components `nuxt-map` and `nuxt-marker` no matter what map provider you choose

- [Coming soon] More map providers and components

- TypeScript support

[📖  Read the documentation](https://map.nuxtjs.org)

## Setup

```sh

yarn add @nuxtjs/map # yarn

npm i @nuxtjs/map # npm

```

## Basic usage

Firstly, you need to add `@nuxtjs/map` to your Nuxt config.

```javascript

// nuxt.config.js

{

    buildModules: [

        "@nuxtjs/map",

    ],

    map: {

      provider: '' // google | leaflet

    }

}

```

Then you can start using `@nuxtjs/map` in your app!

```vue

  


    

      

    

  


const markerPositions = [

  { lat: 40.689247, lng: -74.044502 },

  { lat: 40.689947, lng: -74.044502 },

  { lat: 40.684947, lng: -74.044502 }

]

const center = markerPositions[0]

const zoom = 15

```

## Development

1. Clone this repository

2. Install dependencies using `yarn install` or `npm install`

3. Start development server using `yarn dev` or `npm run dev`

## License

[MIT License](./LICENSE)

[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/map/latest.svg

[npm-version-href]: https://npmjs.com/package/@nuxtjs/map

[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/map.svg

[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/map

[github-actions-ci-src]: https://github.com/nuxt-modules/map-module/actions/workflows/ci.yml/badge.svg

[github-actions-ci-href]: https://github.com/nuxt-community/map-module/actions?query=workflow%3Aci

[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/map-module.svg

[codecov-href]: https://codecov.io/gh/nuxt-community/map-module

[license-src]: https://img.shields.io/npm/l/@nuxtjs/map.svg

[license-href]: https://npmjs.com/package/@nuxtjs/map