Problems to centralize a Map by adding it in a modal Rails

Question

Problems to centralize a Map by adding it in a modal Rails

Navigation

#1 by (0 votes)

0

It happens that the maps work perfectly and even centered except if I add them inside a modal, at first, it did not even show the map in the modal, but it was solved by adding an initializer that resized the map inside application.js , and although it now shows it, it does not show the centralized map, as seen in the image, the marker can barely be seen in the upper left corner, clarify that this only happens when adding it to the modal, use Foundation as a Framework for style I will appreciate your help.

application.js

$(document).ready(function(){
  $(document).foundation();
  $(document).on('open.zf.reveal', '[data-reveal]', function () {
    window.dispatchEvent(new Event('resize'));
  });
});

modal

<div class="reveal large" id="exampleModal1" data-reveal>
<div id="map" style='width: 100%; height: 300px;'></div>

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

</div>

homes_controller.rb

def index
  @homes = Home.all
  @hash = Gmaps4rails.build_markers(@homes) do |home, marker|
    marker.lat home.latitude
    marker.lng home.longitude
  end
end

google-maps ruby-on-rails

asked by Hector Hernandez 27.08.2017 в 07:50

source

1 answer

How to start a Java project with a closed JxTaskPane? Doubt in Wordpress concepts

score 0 · Accepted Answer

I have managed to solve the problem in the following way:

Only modify application.js leaving it like this:

$(document).ready(function(){
  $(document).foundation();
});

And inside the modal, where I will show the map, it adds what was previously inside of the application.js inside the script, in this way I can pass the handler to the function together with resize, in this way to be resized it also centers it according to the parameters that handler passes:

<div class="large reveal" id="MapModal" data-reveal>
  <div id="map" style="width: 100%; height: 460px;"></div>
  <script type="text/javascript">
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: { gestureHandling: 'greedy' }, internal: { id: 'map' }}, function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    $(document).on('open.zf.reveal', '[data-reveal]', function () {
      window.dispatchEvent(new Event('resize'));
      handler.getMap().setZoom(16);
    });
    });
  </script>
</div>

And with this perfectly centralizes the marker = D I leave the final result: