谷歌地圖API查看和填充Gmaps4rails寶石問題的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，引導和Google Maps之間只是一個已知的不兼容，see the gem doc

你需要添加：

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