Заполнение данных на карте Google с помощью рельсов

Question

У меня есть приложение для рельсов, которое использует API Карт Google для поиска игр в вашем регионе. Вы можете создавать игры и устанавливать место, в которое хотите поиграть, используя библиотеку «Места» (у меня есть бит). Тем не менее, теперь я пытаюсь сделать так, что, когда вы нажимаете кнопку, это происходит в тех местах, где люди создавали и заполняют их на карте.

У меня есть модель игр с столбцом адреса, и я пытаюсь принять эту информацию о адресе и вытащить ее на карту, когда пользователь нажимает кнопку.

Есть ли у кого-нибудь советы о том, как я могу это сделать? Благодаря

Answer 1

Я хотел бы подойти к этому с помощью двух камней:

gem 'geocoder' 
gem 'gmaps4rails' 

Хотя можно, конечно, построить адреса, я хотел бы преобразовать те длинные и широты координат с «after_save» методы (вы бы чтобы добавить две колонки в вашу модель игры).

class Game < ActiveRecord::Base 

    after_save :cache_coordinates 

    def cache_coordinates 
    loc = Geocoder.coordinates(address) 
    return if loc.nil? 
    update_column(:latitude, loc[0]) 
    update_column(:longitude, loc[1]) 
    end 
end 

Убедитесь, что следовать инструкциям, приведенным здесь, чтобы получить Gmaps работу: Google-Maps-for-Rails

Ваш контроллер карты может выглядеть примерно так (Не забудьте добавить к маршрутам ...)

class MapsController < ApplicationController 
    respond_to :html, :js 

    def index 
    @geolocations = Game.all 
    @hash = Gmaps4rails.build_markers(@geolocations) do |geolocation, marker| 
     marker.lat geolocation.latitude 
     marker.lng geolocation.longitude 
    end 
    end 
end 

И простой вид будет что-то вроде этого:

// use your API key here... 
<%= javascript_include_tag "//maps.google.com/maps/api/js?v=3.23&amp;sensor=false&amp;libraries=geometry&key=YOURKEY" %> 
<%= javascript_include_tag "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js" %> 
<script> 
    var mapStyle = []; 
    var mapOptions = {}; 
    var handler = Gmaps.build('Google', 
      {markers: 
      {clusterer: { 
       gridSize: 20, 
       maxZoom: 13 
      }}}); 
    handler.buildMap({ 
     internal: {id: 'multi_markers'}, 
     provider: { 
      scrollwheel: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

    }, function(){ 
     var markers = handler.addMarkers(<%=raw @hash.to_json %>); 
     // some options you may or may not want to use 
     handler.map.centerOn([40.397, -95.644]); 
     handler.fitMapToBounds(); 
     handler.getMap().setZoom(4) 
    }); 
</script>