Laravel

https://leafletjs.com/

Leaflet est une librairie JavaScript qui permet d'afficher des cartes de différents fournisseurs, en particulier celles d'OpenStreetMap.

On va aussi pouvoir choisir différentes présentation de carte (les tuiles). On peut trouver les tuiles sur le wiki d'OpenStreetMap - tuiles

Vous pouvez bien sûr afficher des informations sur la carte, je vous laisse regarder la documentation pou cela.

npm install leaflet --save

Dans app.js

window.L = require('leaflet');
import 'leaflet/dist/leaflet.css'

OpenStreetMap propose des cartes en Open Source mais il faut mettre l'attribution en bas de la carte.

$(() => {

    var map = L.map('map').setView([46.8123, -71.1767], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' {,
        attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 17,
        minZoom: 9
    }).addTo(map);
})

On peut remplacer

https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

https: //cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png

Voir le Wiki - tuiles pour les différents type de tuiles. Il faut changer l'attribution suivant celle que vous utilisez.

<div id="map"></div>

#map {
    width: 100%;
    height: 500px;
}