osmleaflet.js

var map = null;

(function($) {
  var markersArray = null;

  $.fn.addMarker = function(arg){
    var defaultOptions = {
      lat: 49.449224,
      lng: 10.9892375,
      zoom: 13,
      scrollwheel: true
    }

    var options = $.extend(defaultOptions, arg);

    map = L.map('map',{scrollWheelZoom:options.scrollwheel}).setView([options.lat, options.lng], options.zoom);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	}).addTo(map);


    addMarker([options.lat, options.lng]);

     map.on('click', function (event) {
        addMarker(event.latlng, map);
    })




    function addMarker(latLng) {
        if (markersArray != null) {
             map.removeLayer(markersArray);
        }

      var marker = L.marker(
            latLng,
            {
                "draggable":true
            }
        ).addTo(map);

      markersArray = marker;

        // Event
        marker.on('dragend', function (event) {
            var marker = event.target;
            var result = marker.getLatLng();
            map.panTo(result);
            updateMarkerPosition(result);
        });

        updateMarkerPosition(marker.getLatLng());
      map.panTo(latLng);
    }
  };

  function updateMarkerPosition(latLng) {
    $('#jform_lat').val(latLng.lat);
    $('#jform_lng').val(latLng.lng);
  }
})(jQuery);