Openstreetmap: embedding map in webpage (like Google Maps)

javascript api maps openstreetmap
Piskvor left the building picture Piskvor left the building · May 29, 2009 · Viewed 127.4k times · Source

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

lhahne picture lhahne · May 29, 2009

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

Related questions

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

I'm trying to fetch some data from the REST API of HP Alm. It works pretty well with a small curl script - I get my data. Now doing that with JavaScript, fetch and ES6 (more or less) seems to …

Read More
Has Facebook sharer.php changed to no longer accept detailed parameters?

We have been opening a sharing popup (via window.open) with the URL like https://www.facebook.com/sharer/sharer.php?s=100&p[title]=EXAMPLE&p[summary]=EXAMPLE&p[url]=EXAMPLE&p[images][0]=EXAMPLE and until …

Read More
How to detect when a youtube video finishes playing?

I am working on a site that has a ton of embedded youtube videos, the client wants to show a popup whenever a video stops splaying. I looked at the youtube api and there seems to be a way to …

Read More