Rails5:宝石'gmaps4rails'谷歌地图没有显示

时间:2017-11-22 10:54:16

标签: ruby-on-rails ruby google-maps gmaps4rails

我已经安装了gem 'gmaps4rails',这是我的设置:

的Gemfile

gem 'gmaps4rails'
gem 'underscore-rails'

的application.js

//= require underscore
//= require gmaps/google

show.html.erb

<script src="//maps.google.com/maps/api/js?key=I have my api key in here"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>      
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>

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

        <script>
            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>

      </div>

项-controller.rb

def show
@items = Item.find(params[:id])
@hash = Gmaps4rails.build_markers(@items) do |item, marker|
  marker.lat item.latitude
  marker.lng item.longitude
  marker.picture({
                     :url => "http://www.google.com/mapfiles/dd-end.png",
                     :width   => 32,
                     :height  => 32
                 })
  marker.infowindow render_to_string(:partial => 'items/info_page')
 end
  append_cur_location
end


def append_cur_location
  @hash << {
    :lat=>action[0],
    :lng=>action[1],
    :picture=> {
        :url=> "http://www.google.com/mapfiles/dd-start.png",
        :width=>  32,
        :height=> 32
      }
  }
 end

  def action
    @lat_lng = cookies[:lat_lng].split("|") unless cookies[:lat_lng] == nil
  end

它应该出现在show.html.erb但它不是!!在浏览器Web检查器中,我收到两个警告:

The page at https://localhost:3000/items/1 was allowed to display insecure content from http://www.google.com/mapfiles/dd-end.png.
The page at https://localhost:3000/items/1 was allowed to display insecure content from http://www.google.com/mapfiles/dd-start.png.

任何想法可能在这里出错?

1 个答案:

答案 0 :(得分:0)

尝试使用此代码更新您的show.html.erb

<script src="//maps.google.com/maps/api/js?key=I have my api key in here"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>      
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>

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

<script>
  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>