@nuxtjs/map

Map module for Nuxt

• ✨  Release Notes
• 📖  Read the documentation

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

Setup

yarn add @nuxtjs/map # yarn
npm i @nuxtjs/map # npm

Basic usage

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

// nuxt.config.js

{
    buildModules: [
        "@nuxtjs/map",
    ],
    map: {
      provider: '<YOUR_MAP_PROVIDER>' // google | leaflet
    }
}

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

<template>
  <div>
    <nuxt-map :options="{ center, zoom }" style="height: 500px">
      <nuxt-marker
        v-for="(marker, i) in markerPositions"
        :key="i"
        :options="{ position: marker }"
      />
    </nuxt-map>
  </div>
</template>

<script lang="ts" setup>
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
</script>

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