Simple OSM Slippy Map Demo/Example
Click on "Run code snippet" to see an embedded OpenStreetMap slippy map with a marker on it. This was created with Leaflet.
Code
// Where you want to render the map.var element = document.getElementById('osm-map');// Height has to be set. You can do this in CSS too.element.style = 'height:300px;';// Create Leaflet map on map element.var map = L.map(element);// Add OSM tile layer to the Leaflet map.L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);// Target's GPS coordinates.var target = L.latLng('47.50737', '19.04611');// Set map's center to target with zoom 14.map.setView(target, 14);// Place a marker on the same location.L.marker(target).addTo(map);<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script><link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/><div id="osm-map"></div>Specs
- Uses OpenStreetMaps.
- Centers the map to the target GPS.
- Places a marker on the target GPS.
- Only uses Leaflet as a dependency.
Note:
I used the CDN version of Leaflet here, but you can download the files so you can serve and include them from your own host.