Openstreetmap: embedding map in webpage (like Google Maps)

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.

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

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.

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.

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:

https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map

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

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.

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

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.

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.

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>