Gmaps4rails only show the map if the explorer has a render action ( Console, Resize ) – Twitter-api

I’m trying to use gmaps4rails, I followed the guide from the github repository, but the map doesn’t appears if I don’t activate the console or resize the windows. I added a click event to add a Mark, and the mark appears but the map doesn’t appears. I’m showing the map into a popup

Any idea? any help will be appreciate it

This is my 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'

this is my 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 .

this is my javascript code:

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);
      });

    }

and finally this is my 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>