Integrate OpenStreetMap on WordPress

Ok so I finally managed to get it working, my map now displays, thanks to you people.
What I did is :

• I changed the path to the absolute path of the scripts. Indeed, using a relative URL was a bad idea.

• I have changed my script, which now looks like that :

  document.addEventListener("DOMContentLoaded", function()
  {
      map_init();
  }, false);
  
  var map;
  
  function map_init(){
      map = new OpenLayers.Map('basicMap');
  
      var mapnik = new OpenLayers.Layer.OSM();
      var fromProjection = new OpenLayers.Projection("EPSG:4326");
      // Transform from WGS 1984
      var toProjection   = new OpenLayers.Projection("EPSG:900913");
      // to Spherical Mercator Projection
      var centerPosition = new OpenLayers.LonLat(-85.00,38.00).transform( fromProjection, toProjection);
      var zoom = 5;
  
      map.addLayer(mapnik);
      map.setCenter(centerPosition, zoom);
  }
  

• I removed the that I had declared in the header, because it was now useless. Indeed, in the php file of my plugin, I put the two scripts and it works, because one of them catches the page opening.

• I now call the php file where my scripts are declared by using a shortcode on my page.

However, I tried to enqueue the scripts and removing the from my php page, but it does not work. I’m not familiar with this technique, is there something more I have to do ?
Here is the piece of code :

function add_scripts(){
    wp_register_script('map_init', '/wp-content/plugins/Fidu-interactive-map/js/map_init.js');
    wp_register_script('OpenLayers', '/wp-content/plugins/Fidu-interactive-map/OpenLayers-2.13.1/OpenLayers.js');
    wp_enqueue_script('map_init');
    wp_enqueue_script('OpenLayers');
}
add_action('wp_enqueue_scripts', 'add_scripts');