多个bootstrap折叠div上的地图

Question

I have two collapsible bootstrap divs. In each div i insert a map from google maps. The first works fine, but the second opens with gray background, and the map not loads.

I resize the map but it's not working.

my HTML

<div class="content">
<div class="more">
 <a data-toggle="collapse" class="as" href="#extra-1">info</a>
</div>
</div>
<div id="extra-1" class="extra-info collapse">
<div class="maps" data-lon="2.159154" data-lat="41.397207"></div>
</div>
<div class="content">
<div class="more">
 <a data-toggle="collapse" class="as" href="#extra-2">info</a>
</div>
</div>
<div id="extra-2" class="extra-info collapse">
<div class="maps" data-lon="2.159154" data-lat="41.397207"></div>
</div>

and JS

 $( document ).ready(function() {

   window.obj = window.obj || {};
        var obj = window.obj;
obj.mapRendering = {
            eachMap: $('.extra-info'),

            init: function () {
                this.oneMap();
            },

            oneMap: function(){
                var that = this;

                this.eachMap.each(function(a, b){
                    $(b).on('show.bs.collapse', function(){

                        if($(this).attr("loaded") == "true") {
                            console.log("revisited");
                            return this;
                        }

                        var selector = $(this).find('.maps');
                        console.log(selector[0]);

                        var lati = selector.attr("data-lat");
                        var longi = selector.attr("data-lon");

                        var latlng = new google.maps.LatLng(parseFloat(lati),parseFloat(longi));
                        var myOptions = {
                            zoom: 16,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            disableDefaultUI: true,
                            mapTypeControl: false,
                            zoomControl: true
                        };
                        var map = [];
                        map[a] = new google.maps.Map(selector[0], myOptions);

                        google.maps.event.trigger(map[a], 'resize');
                        $(this).attr("loaded", "true");

                        return this;
                    });
                });
            }
        };
 obj.mapRendering.init();
    });

fiddle

Thanks, Alex.

Answer 1

You'd probably need to change the callback function on bootstrap, so google maps is called when the animation has finished. So instead of:

$(b).on('.bs.collapse', function(){
  ...
})

You'd have:

$(b).on('.bs.collapse', function(){
  ...
})