npm install vue3-google-map

<template>
 <GoogleMap mapId="DEMO_MAP_ID" :api-key="apiKey" :center="{ lat: 20.5937, lng: 78.9629 }" :zoom="5" style="width: 100%; height: 100%" map-type-id="hybrid">
    <AdvancedMarker :options="{ position: { lat: 23.0225, lng: 72.5714 } }" />
  </GoogleMap>
</template>

<script setup>import { GoogleMap, AdvancedMarker } from 'vue3-google-map';

const config = useRuntimeConfig();
const apiKey = config.public.GOOGLE_MAPS_API_KEY as string;

</script>

npm uninstall vue3-google-map

npm install leaflet

npm i @vue-leaflet/vue-leaflet

<template>
      <div id="map" :style="{ height: '100%', 'z-index': 0 }"></div>
</template>

<script setup lang="ts">
import L from 'leaflet';

onMounted(() => {
  const map = L.map('map', {
    center: L.latLng(46.879966, -121.726909),
    zoom: 5,
  });

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '',
  }).addTo(map);
});
</script>

<style scoped></style>

npm uninstall leaflet

npm uninstall @vue-leaflet/vue-leaflet