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 · Answer

Simple OSM Slippy Map Demo Example Click on  quot Run code snippet quot  to see an embedded OpenStreetMap slippy map with a marker on it  This was created with Leaflet  Code  x000D   x000D     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 leayer to the Leaflet map  L tileLayer  http    s  tile osm org  z   x   y  png         attribution    amp copy   lt a href  http   osm org copyright  gt OpenStreetMap lt  a gt  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   x000D   lt script src  https   unpkg com leaflet 1 6 0 dist leaflet js  gt  lt  script gt   lt link href  https   unpkg com leaflet 1 6 0 dist leaflet css  rel  stylesheet   gt   lt div id  osm-map  gt  lt  div gt  x000D   x000D   x000D   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

User · 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 · 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 · Answer

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

User · 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 · 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 · 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 · 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     x000D   x000D   lt iframe width  425  height  350  frameborder  0  scrolling  no  marginheight  0  marginwidth  0   x000D  src  https   www openstreetmap org export embed html bbox -62 04673002474011 2C16 95487694424327 2C-61 60521696321666 2C17 196751341562923 amp amp layer mapnik   x000D  style  border  1px solid black  gt  lt  iframe gt  x000D   lt br  gt  lt small gt  lt a href  https   www openstreetmap org  map 12 17 0759 -61 8260  gt View Larger Map lt  a gt  lt  small gt  x000D   x000D   x000D    If you want to do something more elaborate  see OSM wiki  Deploying your own Slippy Map

[javascript] Openstreetmap: embedding map in webpage (like Google Maps)

Simple OSM Slippy Map Demo/Example

Code

Specs

Examples related to javascript

Examples related to api

Examples related to maps

Examples related to openstreetmap