How to embed Open Street Map in a webpage (like Google Maps)

Narges Mirzaaghaei
Jan 24, 2019 · 3 min read

OpenStreetMap is a map of the world that is free to use and user contributed. You can edit the map and like Wikipedia if you do a good job it will stay otherwise someone will catch and roll it back.

You can use OSM , either as an iframe or maybe you want to deploy your own slippy map.

1- iframe

Image for post
Image for post
  • Search for place you want
  • Right click and click on “show address”
Image for post
Image for post
  • On the right side click on share
Image for post
Image for post
  • click on HTML and copy the iframe code and paste it into your html document
Image for post
Image for post
Image for post
Image for post

2.Deploy your own map using Leaflet

You can embed OpenStreetMap into your website, just as you might with Google or Yahoo! maps. This can be done using Leaflet (leafletjs.com) which is a free open source JavaScript library with a light, easy to use API, with many plugins.

  • Include leaflet style to head of your html
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  • Include leaflet javascript at the bottom of your body
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  • Create a container for your map. You can use <div> tag for this purpose and add dimension to it
<div id =”my-map” style = “width:800px; height:600px;”></div>
  • Add script for displaying map . it should be added after leaflet.js
<script>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}

// Creating a map object
var map = new L.map(‘map’, mapOptions);

// Creating a Layer object
var layer = new L.TileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’);

// Adding layer to the map
map.addLayer(layer);
</script>
  • Complete markup
<!DOCTYPE html>
<html>
<head>
<title>OSM and Leaflet</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
</head>
<body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}

// Creating a map object
var map = new L.map('map', mapOptions);

// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

// Adding layer to the map
map.addLayer(layer);
</script>
</body>

</html>

we are done !

demo

If you are interested for more detailed information I recommend you view great tutorial on tutorialspoint website

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store