Leaflet.js | Adding marker
http://leafletjs.com/examples/quick-start.html
by shiv_veerashetty
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<div id="map"></div>
CSS
#map {
height: 300px;
}
JavaScript
var location = {
'L1': [80, 90]
}
// Create the map
var map = L.map('map').setView(location['L1'], 3).setView([31, 7], 2);
// Set up the OSM layer
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 16,
minZoom: 0
}).addTo(map);
// add a marker
L.marker(location['L1']).addTo(map).bindPopup("Qatar");
L.marker(location['L2']).addTo(map).bindPopup("Italy");
L.marker(location['L3']).addTo(map).bindPopup("L Three");
L.marker(location['L4']).addTo(map).bindPopup("L Four");