( function( $ ) {
    "use strict";

    var maps = document.querySelectorAll( '.rwmb-osm-map-canvas' );
    maps.forEach( function( mapEl ) {
        mapEl.id = 'rwmb-osm-map-' + Date.now();
        // var inputVal = mapEl.nextElementSibling;
        // console.log( inputVal );
        // var latLng = inputVal.value.split( ',' ).map( parseFloat );
        // var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        // var osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
        // var map = L.map( mapEl.id ).setView( latLng, 13 );
        // var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});
        // map.addLayer(osm);

        var map = new L.Map(mapEl.id);

        // create the tile layer with correct attribution
        var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
        var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});

        // start the map in South-East England
        map.setView(new L.LatLng(51.3, 0.7),9);
        map.addLayer(osm);

        var marker = L.marker( latLng, { draggable: true } ).addTo( map );
        marker.on( 'dragend', function ( e ) {
            var position = marker.getLatLng();
            marker.setLatLng( new L.LatLng( position.lat, position.lng ), { draggable: true } );
            map.panTo( new L.LatLng( position.lat, position.lng ) );
            inputVal.value = [ position.lat, position.lng ].join( ',' );
            console.log( inputVal, position );
        });

    });
})( jQuery );