Skip to content

Instantly share code, notes, and snippets.

@sevko sevko/README.md
Last active Aug 29, 2015

Embed
What would you like to do?
How to add a map to any webpage without Google Maps.

adding a map to any website

Rendering a web-map without resorting to Google Maps is surprisingly trivial. The following example uses the incredible open-source Leaflet library and map tiles provided by OpenStreetMap. Check it out on rawgit.

<html>
<head>
<title>map</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map("map").setView([40.7259, -73.9806], 5);
var tileUrl = "http://{s}.tile.osm.org/{z}/{x}/{y}.png";
L.tileLayer(tileUrl).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.