Pixelstrap - Admin 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>

In your plugins.ts file all the following code:

import { defineNuxtPlugin } from '#app'
                  import { GoogleMap, Marker, Polyline } from "vue3-google-map";
                  export default defineNuxtPlugin(nuxtApp => {
                    nuxtApp.vueApp.component("Polyline", Polyline);
                    nuxtApp.vueApp.component("GoogleMap", GoogleMap);
                    nuxtApp.vueApp.component("Marker", Marker);
                  })

Leaflet Map Offical link Preview link

npm i @vue-leaflet/vue-leaflet

Inside Your template tags add

<l-map :zoom="simple.zoom" global-leaflet="false" :center="simple.center" :useGlobalLeaflet="false"
                      style="height: 500px">
<l-tile-layer :url="simple.url"><l-tile-layer>
<l-map>

Inside Your script tags add

import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
const simple =ref( {
zoom: 5,
center: [49.439557, 234.558105],
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
})

Inside Your style tags add

@import "leaflet/dist/leaflet.css";