title: Geocoding Gmaps API
body: <p>Im buildng a webapp on Rails with Google maps API (still in developement, so I dont think the key is the issue), which works on Index view, but not in Show.
  This is what i´ve done so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>gem "geocoder"
  
  create_table "appointments", force: :cascade do |t|
      t.datetime "date"
      t.string "time"
      t.string "location"
      t.string "status"
      t.text "description"
      t.bigint "car_id"
      t.datetime "created_at", null: false
      t.datetime "updated_at", null: false
      t.float "latitude"
      t.float "longitude"
      t.index ["car_id"], name: "index_appointments_on_car_id"
    end
    
   &lt;!-- app/views/layouts/application.html.erb --&gt;
   
  &lt;body&gt;
    &lt;!-- [...] --&gt;
    &lt;%= javascript_include_tag "application" %&gt;
    &lt;%= javascript_include_tag "https://maps.googleapis.com/maps/api/js" %&gt;
  &lt;/body&gt;
  
  
  
   &lt;!-- Appointments controller --&gt;
   
  class AppointmentsController &lt; ApplicationController
  
    def index
       @appointments = Appointment.where.not(latitude: nil, longitude: nil)
      @markers = @appointments.map do |a|
        {
          lat: a.latitude,
          lng: a.longitude
        }
      end
    end
    
      def show
      @appointment = Appointment.find(params[:id])
      @markers =
        {
          lat: @appointment.latitude,
          lng: @appointment.longitude
        }
    end
    
    &lt;!-- Index and show view --&gt;
    
      &lt;div
    id="map"
    style="width: 50%;
    height: 600px;"
    data-markers="&lt;%= @markers.to_json %&gt;"
  &gt;&lt;/div&gt;
  
  
   &lt;!-- map.js --&gt;
   
   
  // app/javascript/packs/map.js
  import GMaps from 'gmaps/gmaps.js';
  
  const mapElement = document.getElementById('map');
  if (mapElement) { // don't try to build a map if there's no div#map to inject in
    const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
    const markers = JSON.parse(mapElement.dataset.markers);
    map.addMarkers(markers);
    if (markers.length === 0) {
      map.setZoom(2);
    } else if (markers.length === 1) {
      map.setCenter(markers[0].lat, markers[0].lng);
      map.setZoom(14);
    } else {
      map.fitLatLngBounds(markers);
    }
  }
   
    &lt;!-- app/views/layouts/application.html.erb --&gt;
  &lt;!-- [ ... ] --&gt;
  &lt;%= javascript_include_tag "application" %&gt;
  &lt;%= javascript_include_tag "https://maps.googleapis.com/maps/api/js" %&gt;
  &lt;%= javascript_pack_tag "map" %&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works perfectly on index, but not on show. I know <code>@markers</code> works as i can access <code>lat:</code> and <code>lng:</code> correcty from the view, but the marker is non existent and the map shows the middle of the pacific ocean. What could be the issue?</p>
  
  <p>Thanks!</p>