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.

Enterovirus

Answer 1

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

Metralgia

Answer 2

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/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/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.

Ripuarian

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 ? – Hallvard

@Hallvard Please create a jsfiddle to demonstrate the problem, or even better: ask a new question with your code that shows whats wrong. – Ripuarian

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! – Flamboyant

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(). – Ripuarian

@LucasAimaretto Here's an example defining an array of three markers and looping through it: harrywood.co.uk/maps/examples/leaflet/marker-array.view.html – Madai

Answer 3

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.

Hermetic

Answer 4

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:

1. Navigate to the map you want on https://www.openstreetmap.org
2. On the right side, click the "Share" icon, then click "HTML"
3. 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".

Horus

Answer 5

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.

Venenose

their website seems to be down. – Qr

It works, but only without the "www" Subdomain: mapstraction.com ..exactly what I searched, thanks for that! – Studner

mapstraction isn't maintained for almost 10 years now :) – Adamski

Answer 6

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

Nottingham

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. – Enterovirus

The link is dead. – Ripuarian

Answer 7

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.

Divinity

Answer 8

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/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
   
<div id="mapid"></div>

Weinberg

Answer 9

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 :)

Lignite

Answer 10

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.

Melpomene

Me, I'm far more worried about Wordpress than JS, but that's a matter of opinion. Thank you :) – Enterovirus

Btw TIGER is US-only. – Enterovirus