Hogyan tudsz OpenStreetMap térképet beilleszteni a weblapodra?

Egyszerűen.

A weblap fejlécében ("head") betöltöd a szükséges kódokat:

<head>
  <title>OSM beillesztése weblapra</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Ahova szeretnéd a térképet, oda beteszel egy DIV-et:

<div id="mapid"></div>

A lap aljára (vagy a térkép után) pedig beszúrod a térkép betöltéséhez szükséges kódot:

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.6.0/gpx.min.js"></script>
<script src="https://grin.hu/maps/osm/widget/alapterkep.js"></script>

Ha GPS trackeket is szeretnél rátenni, akkor azt előtte add meg:

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.6.0/gpx.min.js"></script>
<!-- Adjunk hozzá tetszőleges GPX útvonala(ka)t -->
<script>
  var gpx = [ 'https://grin.hu/tmp/2021-09-12_10-41_Sun-rtk.gpx' ];
</script>
<script src="https://grin.hu/maps/osm/widget/alapterkep.js"></script>

Ennyi.

A file-ok külön is nézegethetőek:

Kapcsolat