jquery - Google Maps and Bootstrap tabs, but with a 3rd party Map Generator -
i'm aware googlemap has glitch bootstrap hidden tabs , triggered resize required (google.maps.event.trigger(map, 'resize');)
i'm using 3rd party map generator ease of use, , of course have glitches too: in short, google map not displayed on bootstrap hidden tab (it's not misaligned: doesn't show @ all): here is
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--google map generator scripts--> <script src="//maps.googleapis.com/maps/api/js?key=aizasya222wozvynudm3i0a2tr_vlmh_ripq284"></script> <script src="//www.map-generator.org/map/iframejs/65305168-032a-400b-9698-f5c2fcba4477?key=aizasya222wozvynudm3i0a2tr_vlmh_ripq284&width=100%&height=200px"></script> <!--core js--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <!-- nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a></li> <li role="presentation"><a href="#map" aria-controls="map" role="tab" data-toggle="tab">map</a></li> </ul> <!-- tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <p>this original shown tab: map pane hidden, google map doesn't work well</p> </div> <div role="tabpanel" class="tab-pane" id="map"> <p>the map doesnt show (except map frame)</p> <div id="mapid-65305168-032a-400b-9698-f5c2fcba4477"></div> </div> </div> </div>with previous google.maps.event.trigger(map, 'resize'); map shown but... misaligned: this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--google map generator scripts--> <script src="//maps.googleapis.com/maps/api/js?key=aizasya222wozvynudm3i0a2tr_vlmh_ripq284"></script> <script src="//www.map-generator.org/map/iframejs/65305168-032a-400b-9698-f5c2fcba4477?key=aizasya222wozvynudm3i0a2tr_vlmh_ripq284&width=100%&height=200px"></script> <!--core js--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('[href="#map"]').on('shown.bs.tab', function() { google.maps.event.trigger(map65305168032a400b9698f5c2fcba4477, 'resize'); }); }); </script> <div class="container"> <!-- nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a></li> <li role="presentation"><a href="#map" aria-controls="map" role="tab" data-toggle="tab">map</a></li> </ul> <!-- tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <p>this original shown tab: map pane hidden, google map doesn't work well</p> </div> <div role="tabpanel" class="tab-pane" id="map"> <p>the map here, misaligned...</p> <div id="mapid-65305168-032a-400b-9698-f5c2fcba4477"></div> </div> </div> </div>so: idea how make work, please?
you should restore map center, after trigger 'resize', i.e. change on 'shown.bs.tab' method:
$(document).ready(function(){ $('[href="#map"]').on('shown.bs.tab', function() { var mapcenter = map65305168032a400b9698f5c2fcba4477.getcenter(); google.maps.event.trigger(map65305168032a400b9698f5c2fcba4477, 'resize'); map65305168032a400b9698f5c2fcba4477.setcenter(mapcenter); }); }); full snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--google map generator scripts--> <script src="//maps.googleapis.com/maps/api/js?key=aizasya222wozvynudm3i0a2tr_vlmh_ripq284"></script> <script src="//www.map-generator.org/map/iframejs/65305168-032a-400b-9698-f5c2fcba4477?key=aizasya222wozvynudm3i0a2tr_vlmh_ripq284&width=100%&height=200px"></script> <!--core js--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('[href="#map"]').on('shown.bs.tab', function() { console.log(map65305168032a400b9698f5c2fcba4477.getcenter().lat()); var mapcenter = map65305168032a400b9698f5c2fcba4477.getcenter(); google.maps.event.trigger(map65305168032a400b9698f5c2fcba4477, 'resize'); map65305168032a400b9698f5c2fcba4477.setcenter(mapcenter); }); }); </script> <div class="container"> <!-- nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a></li> <li role="presentation"><a href="#map" aria-controls="map" role="tab" data-toggle="tab">map</a></li> </ul> <!-- tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <p>this original shown tab: map pane hidden</p> </div> <div role="tabpanel" class="tab-pane" id="map"> <p>the map here, , centered after shown...</p> <div id="mapid-65305168-032a-400b-9698-f5c2fcba4477"></div> </div> </div> </div>
Comments
Post a Comment