根据坐标谷歌地图添加标记

Question

I really need some help on this, it's quite hard for me to figure out how would the best way to do this.

Controller:

def merchant_ids
    merchants = Merchant.where(id: params[:id]).pluck(:merchant_name, :id, :merchant_city, :physical_address, :merchant_phone, :latitude, :longitude)
    render json: merchants
  end

this is for showing the user the information based on the selected merchant .

example:

[["Burger King",1,"Aguadilla","Burger King Plaza Real","78778778787",18.3703084883462,-66.0766804218292]]

Javascript:

// this one display the information based on the selected value
$('#complaint_merchant_id').chosen().change(function(){
    var clean_html = $('#merchant_name, #physical_address, #merchant_phone');
    var clean_value = $('#merchants_latitude, #merchants_longitude');
    clean_html.html('');
    clean_value.val('');
    $.ajax('/dashboard/merchants/merchant_ids/' + this.value).done(function(data){
        for (var city in data);
        $('#merchant_name').append(data[city][0]);
        $('#physical_address').append(data[city][3]);
        $('#merchant_phone').append(data[city][4]);
        $('#merchants_latitude').val(data[city][5]);
        $('#merchants_longitude').val(data[city][6]);
    }) ;
});

I have the gmaps.js storing the latitude and longitude in a float in the database in the merchants record

schema:

  create_table "merchants", force: :cascade do |t|
    t.string   "merchant_name"
    t.string   "merchant_city"
    t.string   "postal_address"
    t.string   "physical_address"
    t.string   "email"
    t.string   "merchant_phone"
    t.string   "merchant_secondary_phone"
    t.datetime "created_at",               null: false
    t.datetime "updated_at",               null: false
    t.integer  "user_id"
    t.float    "latitude"
    t.float    "longitude"
  end

in the view I have two fields to put the latitude and longitude that gets pulled from the database depending on which merchant is selected:

<div class="col-md-4">
      <%= label '', 'Nombre de Proveedor/Agencia:' %><br>
      <span class="color-main" id="merchant_name"></span>
    </div>
    <div class="col-md-4">
      <%= label '', 'Dirección local:' %><br>
      <span class="color-main" id="physical_address"></span>
     </div>
     <div class="col-md-4">
       <%= label '', 'Teléfono:' %><br>
       <span class="color-main" id="merchant_phone"></span>
      </div>

      <div class="col-md-12">
        <input type="text" id="merchants_latitude"/>
        <input type="text" id="merchants_longitude"/>
      </div>

What I need to do is when they select a merchant, it will put a marker based on the latitude and longitude of the current selected merchant and center the map to the marker.

I only know how to do the eventListener for clicking in the map but to refresh the marker when someone selects an option in a tag outside of the map I currently don't know how to.

I have the map loading in a

<div id="map-complaints" style="width:100%;height:400px;"></div>

Thank you for your time, really appreciate.

edit:

this is how I select the merchant:

<div class="col-md-12">
  <%= f.label :merchant_id, 'Seleccione proveedor o agencia de servicios' %>
  <% merchants_array = @merchants.map { |merchant| [merchant.merchant_name, merchant.id] } %>
  <%= f.select :merchant_id, merchants_array, {include_blank: true}, {class: 'chosen-select form-control', tabindex: '-1'} %>
 </div>

Answer 1

I think that the best solution was to use such an onclick event on the by which selection is made of the merchant. This onClick must contain a call to a javascript function that creates the marker. Since the div have the coordinates where to place the marker, the function call javascript may contain the information necessary for proper placement on the map.