Simple marker rendering I am trying to render in a leaflet map that should render a single marker. I am building the JavaScript as follows.

build the map
an even listener for when the user opens the page where the map is rendered.

I query as follows:
@company = Company.friendly.find_by(
                        slug: [ params[:id],
                        params[:company_id] ])
respond_to do |format|
      format.html
      format.json { render json:
        {
          type: &quot;Feature&quot;,
          &quot;geometry&quot;: {
            &quot;type&quot;: &quot;Point&quot;,
            &quot;coordinates&quot;: [@company.longitude, @company.latitude] # this part is tricky
          },
          properties: {
            &quot;title&quot;: @company.name,
            &quot;address&quot;: @company.street_address,
          }
        }
      }
    end

I console log the steps and everything seems to &quot;work&quot;. The data is loaded and data.responseJSON renders as follows:
geometry: {…}
​​coordinates: Array [ 1.5918642, 43.7189496 ]​​
type: &quot;Point&quot;
&lt;prototype&gt;: Object { … }
properties: Object { title: &quot;Acme SaS&quot;, address: &quot;xxx&quot;, &quot;marker-color&quot;: &quot;#FFFFFF&quot;, … }
type: &quot;Feature&quot;

However, the map does not ​render as wanted. Only a grey box shows up. If I provide with a lat, Lon array, the map renders a map.
function buildCompanyMap() {

  document.getElementById('company_map').innerHTML = &quot;&lt;div id='map' style='width: 100%; height: 100%;'&gt;&lt;/div&gt;&quot;;

  console.log(&quot;script #1: %o&quot;, document.getElementById('company_map'));
  console.log(&quot;script #2: %o&quot;, document.getElementById('map'));

  var data = $.ajax({
      url: &quot;#companies/company.json&quot;,
      dataType: &quot;json&quot;,
      success: console.log(&quot;company data successfully loaded.&quot;),
      error: function(xhr) {
          alert(xhr.statusText)
      }
  });

  console.log(&quot;script #3: %o&quot;, $);

  console.log(&quot;script #4: %o&quot;, data);

  $.when(data).done(function() {
    var map = new L.Map('map', {
        dragging: false,
        tap: false,
        scrollWheelZoom: false
      });

    var osmUrl = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
        osmAttribution = 'Map data © &lt;a href=&quot;http://openstreetmap.org&quot;&gt;OpenStreetMap&lt;/a&gt; contributors,' +
                        ' &lt;a href=&quot;http://creativecommons.org/licenses/by-sa/2.0/&quot;&gt;CC-BY-SA&lt;/a&gt;',
        osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});

    map.addLayer(osmLayer);

    console.log(&quot;script #5: %o&quot;, data.responseJSON);

    var geojsonMarkerOptions = {
        radius: 8,
        fillColor: &quot;#ff7800&quot;,
        color: &quot;#000&quot;,
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    };

    L.geoJSON(data.responseJSON, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
    }).addTo(map);

  });
};

document.addEventListener(&quot;turbolinks:load&quot;, function() {
  if (document.getElementById('company_map') == null) {
    //console.log('true')
  }
  else {
    buildCompanyMap();
  }
});
A correction. I have removed the use of jQuery in the correction. The main issue was that you don't set anywhere a map center and a zoom. I've changed the behaviour by zooming the map to GeoJSON extent (e.g map.fitBounds(jsonLayer.getBounds());)
You could also made the change by setting a map center and a zoom like described in this link to official doc.
function buildCompanyMap() {

  document.getElementById('company_map').innerHTML = &quot;&lt;div id='map' style='width: 100%; height: 100%;'&gt;&lt;/div&gt;&quot;;

  console.log(&quot;script #1: %o&quot;, document.getElementById('company_map'));
  console.log(&quot;script #2: %o&quot;, document.getElementById('map'));

  var map = new L.Map('map', {
      dragging: false,
      tap: false,
      scrollWheelZoom: false
    });

  var osmUrl = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
      osmAttribution = 'Map data © &lt;a href=&quot;http://openstreetmap.org&quot;&gt;OpenStreetMap&lt;/a&gt; contributors,' +
                      ' &lt;a href=&quot;http://creativecommons.org/licenses/by-sa/2.0/&quot;&gt;CC-BY-SA&lt;/a&gt;',
      osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});

  map.addLayer(osmLayer);

  console.log(&quot;script #5: %o&quot;, data.responseJSON);

  var geojsonMarkerOptions = {
      radius: 8,
      fillColor: &quot;#ff7800&quot;,
      color: &quot;#000&quot;,
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
  };

  fetch('#companies/company.json', {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    .then(response =&gt; response.json())
    .then (json =&gt; {
      var jsonLayer = L.geoJSON(json, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
      })
      jsonLayer.addTo(map);
      map.fitBounds(jsonLayer.getBounds());
    })
    .catch(function(error) {
      console.log('Error on fetch operation: ' + error.message);
    });

};

document.addEventListener(&quot;turbolinks:load&quot;, function() {
  if (document.getElementById('company_map') == null) {
    //console.log('true')
  }
  else {
    buildCompanyMap();
  }
});