레일을 사용하여 Google지도에 데이터 채우기

Google지도 API를 사용하여 해당 지역에서 픽업 게임을 찾는 레일 앱이 있습니다. 플레이스 라이브러리를 사용하여 게임을 만들고 플레이하고 싶은 장소를 설정할 수 있습니다. 그러나 이제 버튼을 클릭하면 사람들이 만든 위치를 가져 와서지도에 채우도록 노력하고 있습니다.레일을 사용하여 Google지도에 데이터 채우기

나는 주소 열을 가진 게임 모델을 가지고 있는데, 나는 그 주소 정보를 가져 와서 사용자가 버튼을 누를 때지도에 팝업을 표시하려고한다.

아무에게도 내가 할 수있는 방법에 대한 도움말이 있습니까?

당신은 확실히 주소를 그릴 수 있지만, 내가 'after_save'방법으로 길고 위도 좌표들을 변환하고자

gem 'geocoder' 
gem 'gmaps4rails'

(당신은 것이다 : 감사

는

출처

2016-12-21 David Cisneros

나는 두 보석의 도움으로이 문제를 접근하는 것 게임 모델에 두 개의 열을 추가).

(... 경로에 추가하는 것을 잊지 마세요) 이 Google-Maps-for-Rails

같은 것을 볼 수 있습니다 귀하의지도 컨트롤러 :

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의 작업을 얻기 위해 여기에 설명 된 지침을 반드시 준수

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>

출처

2016-12-26 00:20:02

레일을 사용하여 Google지도에 데이터 채우기

답변

관련 문제