Openstreetmap: embedding map in webpage (like Google Maps)

Question

Is there a way to embed/mashup the OpenStreetMap in your page (like the way Google Maps API works)?

I need to show a map inside my page with some markers and allow dragging/zooming around, maybe routing. I suspect there would be some Javascript API for this, but I can't seem to find it.

Searching gets me an API for access to raw map data, but that seems to be more for map editing; besides, working with that would be a heavy task for AJAX.

score 89 · Accepted Answer · edited Jun 05 '09 at 12:00

89

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

edited Jun 05 '09 at 12:00

guerda

23,388
27
97
146

answered May 29 '09 at 09:33

lhahne

5,909
9
33
40

score 50 · Answer 2 · edited May 09 '21 at 14:37

50

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: '&copy; <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.

edited May 09 '21 at 14:37

Guido

46,642
28
120
174

answered Jan 19 '17 at 23:25

totymedli

29,531
22
131
165

I used your code in a javascript function, and it works like a charm. But again, triggering that function, enlarges osm map and destroys everything. Any solution ? – 0x48piraj Dec 26 '17 at 05:49
2

@0x48piraj Please create a [jsfiddle](http://jsfiddle.net) to demonstrate the problem, or even better: ask a new question with your code that shows whats wrong. – totymedli Dec 26 '17 at 06:34
This is beautiful. Thanks a lot! One question though: at `var target = L.latLng()` you clearly define the coordinates. Any chance of showing how to implement the case where the coordinates for several dots are stored inside a JSON structure? Thanks! – Lucas Aimaretto Jul 07 '20 at 21:03
1

That is used only for the view where the map's center should be located. You add the markers with `L.marker(target).addTo(map);` Just loop your structure and create as many `L.latLng()`s as you need and pass those to `L.marker()`. – totymedli Jul 07 '20 at 22:30
@LucasAimaretto Here's an example defining an array of three markers and looping through it: http://harrywood.co.uk/maps/examples/leaflet/marker-array.view.html – Harry Wood Nov 15 '21 at 16:21

score 41 · Answer 3 · edited Sep 13 '15 at 20:53

41

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.

edited Sep 13 '15 at 20:53

headuck

2,763
16
19

answered Apr 28 '14 at 07:19

Piskvor left the building

91,498
46
177
222

score 9 · Answer 4 · answered Nov 28 '18 at 23:07

If you just want to embed an OSM map on a webpage, the easiest way is to get the iframe code directly from the OSM website:

Navigate to the map you want on https://www.openstreetmap.org
On the right side, click the "Share" icon, then click "HTML"
Copy the resulting iframe code directly into your webpage. It should look like this:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&amp;layer=mapnik" 
style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map</a></small>

If you want to do something more elaborate, see OSM wiki "Deploying your own Slippy Map".

score 6 · Answer 5 · edited Jul 03 '19 at 15:20

6

Take a look at mapstraction. This can give you more flexibility to provide maps based on google, osm, yahoo, etc however your code won't have to change.

edited Jul 03 '19 at 15:20

simonalexander2005

4,338
4
48
92

answered Jun 18 '09 at 22:20

Alan

13,510
9
44
50

their website seems to be down. – maddrag0n Jul 09 '12 at 09:25
1

It works, but only without the "www" Subdomain: http://mapstraction.com/ ..exactly what I searched, thanks for that! – david Mar 07 '13 at 22:19
mapstraction isn't maintained for almost 10 years now :) – Julian F. Weinert Jan 24 '20 at 23:06

score 5 · Answer 6 · edited Dec 11 '19 at 20:14

5

You can use OpenLayers (js API for maps).

There's an example on their page showing how to embed OSM tiles.

Edit: New Link to OpenLayers examples

edited Dec 11 '19 at 20:14

kttii

107
13

answered May 29 '09 at 09:30

diciu

29,133
4
51
68

That's what I was looking for, thanks a lot. I can only accept one answer though, so it goes to the more detailed one. – Piskvor left the building May 29 '09 at 10:25
4

The link is dead. – totymedli Jan 19 '17 at 23:26

score 5 · Answer 7 · answered Jun 10 '09 at 14:02

I would also take a look at CloudMade's developer tools. They offer a beautifully styled OSM base map service, an OpenLayers plugin, and even their own light-weight, very fast JavaScript mapping client. They also host their own routing service, which you mentioned as a possible requirement. They have great documentation and examples.

score 3 · Answer 8 · answered Jul 12 '21 at 21:07

Use Leaflet, as simple as this (run the code):

var mymap = L.map('mapid').setView([51.505, -0.09], 13)

// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  { subdomains: ['a', 'b', 'c'] })
  .addTo(mymap)

#mapid { height: 280px; }

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
   
<div id="mapid"></div>

score 0 · Answer 9 · answered Sep 09 '18 at 16:21

0

There is simple way to do it if you fear Javascript...I'm still learning. Open Street makes a simple Wordpress plugin you can customize. Add OSM Widget plugin.

This will be a filler until I figure out my Python Java concotion using coverter TIGER line files from the Census Bureau.

answered Sep 09 '18 at 16:21

David Spahn

9
1

Me, I'm far more worried about Wordpress than JS, but that's a matter of opinion. Thank you :) – Piskvor left the building Sep 09 '18 at 16:24
Btw TIGER is US-only. – Piskvor left the building Sep 09 '18 at 16:24

score 0 · Answer 10 · answered Oct 02 '22 at 21:06

For anyone still stumbling here, there are now tools that don't require you to be a developer and are as easy to use but much more versatile than Google My Maps, such as FacilMap and uMap.

Just add some markers and then fetch your embeddable iframe, which can be set to be interactive as well :)

Openstreetmap: embedding map in webpage (like Google Maps)

10 Answers10

Simple OSM Slippy Map Demo/Example

Code

Specs