Leaflet demo

For update marker position

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<div id="map"></div>

CSS

#map {
    height: 780px;
    width: 1169px;
}

JavaScript

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
	 	// Creating a tile layer usually involves setting the URL template for the tile images
	 	var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
	 	    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	 	    osm = L.tileLayer(osmUrl, {
	 	        maxZoom: 50,
	 	        attribution: osmAttrib
	 	    });

	 	// initialize the map on the "map" div with a given center and zoom
	var map = L.map('map',{zoomDelta: 0.01,zoomSnap: 0, wheelPxPerZoomLevel: 400
                                            }).setView([52.374341378647216, -2.0496530138585425], 16).addLayer(osm);

 var corner1 = L.latLng( 52.381222788977524,-2.067712348604789),
 corner2 = L.latLng(52.39184979780562, -2.0438635700043166),
 bbounds = L.latLngBounds(corner1, corner2);
                                 
                                    map.fitBounds(bbounds);

	 	// Script for adding marker on map click
	 	function onMapClick(e) {

	 	    var marker = L.marker(e.latlng, {
	 	        title: "Resource location",
	 	        alt: "Resource Location",
	 	        riseOnHover: true
	 	    }).addTo(map)
	 	        .bindPopup(e.latlng.toString()).openPopup();

	 	    // Update marker on changing it's position
	 	    marker.on("dragend", function (ev) {

	 	        var chagedPos = ev.target.getLatLng();
	 	        this.bindPopup(chagedPos.toString()).openPopup();

	 	    });
	 	}

	 	map.on('click', onMapClick);