Google지도 API Gmaps4rails의 문제보기 및 채우기 Gem in Rails 4

Question

this tutorial here을 따라 내 애플리케이션에 새로운 스캐 폴드를 추가하려고합니다. 동영상에서 모델은 사용자라고했지만 내 모델은 보고서라고합니다. 나는 4:14에 그것을 만들었지 만,지도가 제대로 적재되지 않았다. see here for screenshot. It does not zoom in, only shows blue. When I drag it one way or the other, it turns gray.

나는 정확하게이 튜토리얼을 따라 왔지만, 그 스캐 폴드가 다른 모델과 호환되지 않는지 궁금하다. 또는 부트 스트랩 CSS 템플릿이이지도의보기를 엉망으로 만든다.

두 가지 문제가 있습니다.보기가 올바르게로드되지 않고 보고서가지도에 채워지지 않습니다. 아래 소스 코드 중 일부를 붙여 넣었습니다. 다른 파일을보고 싶다면 도움을 청하십시오!

**reports_controller.rb** 

class ReportsController < ApplicationController 
    before_action :set_report, only: [:show, :edit, :update, :destroy] 

    # GET /reports 
    # GET /reports.json 
    def index 
    @reports = Report.all 

    @hash = Gmaps4rails.build_markers(@reports) do |report, marker| 
     marker.lat report.latitude 
     marker.lng report.longitude 
     marker.infowindow report.description 
    end 
    end 

    # GET /reports/1 
    # GET /reports/1.json 
    def show 
    end 

    # GET /reports/new 
    def new 
    @report = Report.new 
    end 

    # GET /reports/1/edit 
    def edit 
    end 

    # POST /reports 
    # POST /reports.json 
    def create 
    @report = Report.new(report_params) 

    respond_to do |format| 
     if @report.save 
     format.html { redirect_to @report, notice: 'Report was successfully created.' } 
     format.json { render action: 'show', status: :created, location: @report } 
     else 
     format.html { render action: 'new' } 
     format.json { render json: @report.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    # PATCH/PUT /reports/1 
    # PATCH/PUT /reports/1.json 
    def update 
    respond_to do |format| 
     if @report.update(report_params) 
     format.html { redirect_to @report, notice: 'Report was successfully updated.' } 
     format.json { head :no_content } 
     else 
     format.html { render action: 'edit' } 
     format.json { render json: @report.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    # DELETE /reports/1 
    # DELETE /reports/1.json 
    def destroy 
    @report.destroy 
    respond_to do |format| 
     format.html { redirect_to reports_url } 
     format.json { head :no_content } 
    end 
    end 

    private 
    # Use callbacks to share common setup or constraints between actions. 
    def set_report 
     @report = Report.find(params[:id]) 
    end 

    # Never trust parameters from the scary internet, only allow the white list through. 
    def report_params 
     params.require(:report).permit(:latitude, :longitude, :address, :description, :photo, :title, :text) 
    end 
end 

- * -

**index.html.erb** 

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script> 
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script> 

<h1>Listing reports</h1> 

<table> 
    <thead> 
    <tr> 
     <th>Latitude</th> 
     <th>Longitude</th> 
     <th>Address</th> 
     <th>Description</th> 
     <th>Photo</th> 
     <th>Title</th> 
     <th>Text</th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
    </thead> 

    <tbody> 
    <% @reports.each do |report| %> 
     <tr> 
     <td><%= report.latitude %></td> 
     <td><%= report.longitude %></td> 
     <td><%= report.address %></td> 
     <td><%= report.description %></td> 
     <td><%= report.photo %></td> 
     <td><%= report.title %></td> 
     <td><%= report.text %></td> 
     <td><%= link_to 'Show', report %></td> 
     <td><%= link_to 'Edit', edit_report_path(report) %></td> 
     <td><%= link_to 'Destroy', report, method: :delete, data: { confirm: 'Are you sure?' } %></td> 
     </tr> 
    <% end %> 
    </tbody> 
</table> 

<br> 

<%= link_to 'New Report', new_report_path %> 

<div style='width: 800px;'> 
    <div id="map" style='width: 800px; height: 400px;'></div> 
</div> 

<script type="text/javascript"> 
handler = Gmaps.build('Google'); 
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
    markers = handler.addMarkers(<%=raw @hash.to_json %>); 
    handler.bounds.extendWith(markers); 
    handler.fitMapToBounds(); 
}); 

</script> 

Answer 1

예는 매우 가능성이 CSS의 문제, gmaps4rails 특히 아무것도, 부트 스트랩 및지도를 구글 사이의 단지 알려진 비 호환성, see the gem doc

당신은 필요 것 추가 :

#map img { 
    max-width: none; 
} 
#map label { 
    width: auto; display:inline; 
}