Nuxt - Mofi Document

Maps

Google Maps Offical link Preview link

npm i vue3-google-map

Inside Your template tags add

<GoogleMap :center="{lat:20.5937, lng:78.9629}" :zoom="12" style="width: auto; height: 500px"><GoogleMap>

Inside Your script tags add

import { GoogleMap, Marker } from "vue3-google-map";

Leaflet Map Offical link Preview link

npm i nuxt3-leaflet

Inside Your nuxt.config.ts add

export default defineNuxtConfig({
                  devtools: { enabled: true },
                  modules: ['nuxt3-leaflet'],
                })

Inside Your template tags add


<ClientOnly>
  <LMap
 ref="map"
 :zoom="5"
 :center="[49.439557, 234.558105]"
 >
 <LTileLayer
     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
     attribution="&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors"
     layer-type="base"
     name="OpenStreetMap"
 />
 </LMap>
</ClientOnly>