Maps
Google Maps Offical link Preview link
npm i vue3-google-mapInside 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 @vue-leaflet/vue-leafletInside 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";