0

I have a map inside a dynamic tab:

<div id="tabs">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
   <ul class="nav nav-tabs"  id="prodTabs">
      <li class="active"><a href="#map">Map_locations</a></li>
      <li><a href="#comments">Comments</a></li>
      <% if shopper_signed_in? %>
      <li><a href="#add">Add Comments</a></li>
      <% end %>
   </ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="map">
<div id="map"></div>

the tabs are dynamic:

<script>
$('#tabs').on('click','.tablink,#prodTabs a',function (e) {
    e.preventDefault();
    var url = $(this).attr("data-url");

    if (typeof url !== "undefined") {
        var pane = $(this), href = this.hash;

        // ajax load from data-url
        $(href).load(url,function(result){
            pane.tab('show');
        });
    } else {
        $(this).tab('show');
    }
});
</script>

and I'm trying to show the map fit to bounds according to the two markers I have. But one marker is showing half, and only if I zoom out the map appears correct. But I don't want the value of the zoom to be so zoomed out. Any ideas on how to fix this issue?

<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();
       handler.getMap().setZoom(15);
   });
</script>
Allan Vargas
  • 69
  • 7
Theopap
  • 715
  • 1
  • 10
  • 33
  • One way to handle this could be to calculate the center of your map pins, either by calculating great circle distance averages or by using with the Distance Matrix API (if you need road distance mapping), and panning your map to that center. It's hard to tell without knowing how far apart your pins are. – Marventus Jan 11 '18 at 12:08
  • Maybe setting a minimum zoom could fix your problem: https://stackoverflow.com/questions/19304574/center-set-zoom-of-map-to-cover-all-visible-markers#answer-22712105 – betofarina Jan 11 '18 at 14:06

0 Answers0