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.

user_101419 · Answer

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

user_115246 · Answer

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:



View Larger Map

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

user_2958 · Answer

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.

user_2811 · Answer

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

user_120120 · Answer

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.

user_10326869 · Answer

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.

user_1243247 · Answer

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; }

Openstreetmap: embedding map in webpage (like Google Maps)

9 Answers