site_logiciels/components/Contact/Map.vue

<template>
  <div class="map-container">
    <l-map
      ref="map"
      :zoom="15"
      :center="location"
      :options="{scrollWheelZoom: false}"
    >
      <l-tile-layer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        layer-type="base"
        name="OpenStreetMap"
      />

      <l-marker
        :lat-lng="location"
      />
    </l-map>
  </div>
</template>

<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'

const location = [46.075245, 6.570162]
</script>

<style scoped lang="scss">
.map-container {
  height: 500px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
</style>