Openstreetmap: embedding map in webpage (like Google Maps) Openstreetmap: embedding map in webpage (like Google Maps) javascript javascript

Openstreetmap: embedding map in webpage (like Google Maps)


javascript api maps openstreetmap

You need to use some JavaScript stuff to show your map. OpenLayers is the number one choice for this.

There is an example at http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example and something more advanced at

http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

and

http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

javascript api maps openstreetmap

There's now also Leaflet, which is built with mobile devices in mind.

There is a Quick Start Guide for leaflet. Besides basic features such as markers, with plugins it also supports routing using an external service.

For a simple map, it is IMHO easier and faster to set up than OpenLayers, yet fully configurable and tweakable for more complex uses.

javascript api maps openstreetmap

Simple OSM Slippy Map Demo/Example

Click on "" 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>
Expand snippet