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.

Answer 1

You can use OpenLayers (js API for maps).

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

Answer 2

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

Answer 3

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.

Answer 4

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.