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>

Inside Your script tags add

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

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";