我正在尝试使用gmaps4rails,我遵循了github存储库的指南,但如果我不激活控制台或调整窗口大小,地图就不会出现。我添加了一个单击事件来添加一个标记,标记出现了,但是地图没有出现。我要在弹出窗口中显示地图
有什么想法吗?任何帮助都将不胜感激
这是我的gemfile
gem "rails", "4.1.1"
gem "mongoid", github: "mongoid/mongoid"
gem "sass-rails", ">= 3.2"
gem "uglifier", ">= 1.3.0"
gem "coffee-rails", "~> 4.0.1"
gem "therubyracer", platforms: :ruby
gem "jquery-rails"
gem "jquery-ui-rails"
gem "jquery-turbolinks"
gem "turbolinks"
gem "jbuilder", "~> 1.2"
group :development do
  gem "guard-rspec"
  gem "pry"
  gem "quiet_assets"
  gem "thin"
end
group :development, :test do
  gem "zeus"
  gem "rspec-rails"
  gem "factory_girl_rails"
end
group :test do
  gem "mongoid-rspec"
  gem "ffaker"
  gem "simplecov", require: false
  gem "database_cleaner"
  gem "rb-inotify", "~> 0.9"
end
gem "bootstrap-sass", "~> 3.3.6"
gem "font-awesome-sass-rails"
gem "simple_form", github: "plataformatec/simple_form"
gem "devise", "~> 3.0.0"
gem "cancan"
gem "omniauth"
gem "omniauth-facebook"
gem "omniauth-twitter"
gem "hashugar", github: "alex-klepa/hashugar"
gem "paperclip"
gem "mongoid-paperclip", :require => "mongoid_paperclip"
gem "country_select"
gem "city-state"
gem 'rails-jquery-autocomplete'
gem 'underscore-rails'
gem 'gmaps4rails'这是我的application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap
//= require jquery-ui/autocomplete
//= require autocomplete-rails
//= require underscore
//= require gmaps/google
//= require_tree .这是我的javascript代码:
function initialize(){
        handler = Gmaps.build('Google',{mapTypeId: google.maps.MapTypeId.ROADMAP, zoom:8});
      handler.buildMap({ provider: {}, internal: {id: 'map' }}, function(){
      if(navigator.geolocation)
        navigator.geolocation.getCurrentPosition(displayOnMap);
      });
      handler.current_marker = null;
      function displayOnMap(position){
        handler.map.centerOn(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
        handler.fitMapToBounds();
      };  
      function placeMarker(location) {
          if(handler.current_marker === null){
            handler.current_marker = new google.maps.Marker({
                position: location, 
                map: handler.getMap(),
                draggable:true,
                "picture": {
                  "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
                  "width":  32,
                  "height": 32
                }
            });
          }
          else{
            handler.current_marker.setPosition(location);
          }
          console.log(location);
      };
      google.maps.event.addListener(handler.getMap(), 'click', function(event) {
          placeMarker(event.latLng);
      });
    }最后这是我的html:
<script src="//maps.google.com/maps/api/js?v=3.18&key=AIzaSyB4enUtJizko-Wj8yZ9TylVcjRecrypOKo&sensor=false"></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<!--script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script--> 
<!-- only if you need custom infoboxes -->
<div id="postModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      Add Location
      </div>
      <div class="modal-body row">
        <div class='col-md-12'>
        <%= simple_form_for @location, remote: true, format: :json do |f| %>
          <%= f.error_notification %>
          <div class="form-inputs">
            <%= f.input :name %>
            <%= f.label :point %>
            <div style='width: 98%; text-align: center;'>
              <div id="map" style='width: 100%; height: 300px;'></div>
            </div>
            <%= f.label :country %>
            <%= f.country_select("country", ["Colombia", "Argentina"], {}, {class: "form-control", id: "country"} )%>
            <%= f.select :state , options_from_collection_for_select(@states, :first, :last), {}, {class: 'form-control'}  %>
            <%= f.select :city , options_for_select(@cities.each{|a| [ a, a ] }), {}, {class: 'form-control'} %>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div>
            <%= f.button :submit, 'Save', :class => "btn btn-primary btn-sm" %>
            <ul class="pull-left list-inline"><li><a href=""><i class="glyphicon glyphicon-upload"></i></a></li><li><a href=""><i class="glyphicon glyphicon-camera"></i></a></li><li><a href=""><i class="glyphicon glyphicon-map-marker"></i></a></li></ul>
        </div>  
      </div>
      <% end %>
      <br/>
  </div>
  </div>
</div>发布于 2016-03-01 20:34:29
请从你的推特引导模式中删除“淡入淡出”。下面是你的模式弹出窗口的修改代码。
<div id="postModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      Add Location
      </div>
      <div class="modal-body row">
        <div class='col-md-12'>
        <%= simple_form_for @location, remote: true, format: :json do |f| %>
          <%= f.error_notification %>
          <div class="form-inputs">
            <%= f.input :name %>
            <%= f.label :point %>
            <div style='width: 98%; text-align: center;'>
              <div id="map" style='width: 100%; height: 300px;'></div>
            </div>
            <%= f.label :country %>
            <%= f.country_select("country", ["Colombia", "Argentina"], {}, {class: "form-control", id: "country"} )%>
            <%= f.select :state , options_from_collection_for_select(@states, :first, :last), {}, {class: 'form-control'}  %>
            <%= f.select :city , options_for_select(@cities.each{|a| [ a, a ] }), {}, {class: 'form-control'} %>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div>
            <%= f.button :submit, 'Save', :class => "btn btn-primary btn-sm" %>
            <ul class="pull-left list-inline"><li><a href=""><i class="glyphicon glyphicon-upload"></i></a></li><li><a href=""><i class="glyphicon glyphicon-camera"></i></a></li><li><a href=""><i class="glyphicon glyphicon-map-marker"></i></a></li></ul>
        </div>  
      </div>
      <% end %>
      <br/>
  </div>
  </div>
</div>发布于 2016-03-01 21:02:47
此question中解释了问题和解决方案。基本上你需要添加这个事件来解决这个问题:
$("#postModal").on("shown.bs.modal", function () {
   google.maps.event.trigger(map, "resize");
}); 其中Map是Google map的实例。
https://stackoverflow.com/questions/35721328
复制相似问题