Using Google maps field with bootstrap collapse

• walkers_inspiration

• October 13, 2016 at 11:19 pm

Hi There,

I am using the google maps api within a bootstrap collapse accordion. The map appears correctly on the first accordian but doesn’t resize center when I click a second one. Can someone help me out? Code below.

Thanks

(function($) {
    function new_map($el) {

        // var
        var $markers = $el.find('.marker');

        // vars
        var args = {
            zoom: 16,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // create map
        var map = new google.maps.Map($el[0], args);

        // add a markers reference
        map.markers = [];
        // add markers
        $markers.each(function() {
            add_marker($(this), map);
        });

        // center map
        center_map(map);
        // return
        return map;
    }

    function add_marker($marker, map) {

        // var
        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

        // create marker
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });

        // add to array
        map.markers.push(marker);

        // if marker contains HTML, add it to an infoWindow
        if ($marker.html()) {
            // create info window
            var infowindow = new google.maps.InfoWindow({
                content: $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', function() {

                infowindow.open(map, marker);

            });
        }

    }

    function center_map(map) {
        // vars
        var bounds = new google.maps.LatLngBounds();

        // loop through all markers and create bounds
        $.each(map.markers, function(i, marker) {
            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
            bounds.extend(latlng);
        });

        // only 1 marker?
        if (map.markers.length == 1) {
            // set center of map
            map.setCenter(bounds.getCenter());
            map.setZoom(16);
        } else {
            // fit to bounds
            map.fitBounds(bounds);
        }
        google.maps.event.trigger(map, 'resize');
    }

    $('.dis-title').click(function() {

        var target = $(this).attr('href') + ' .acf-map';
        $(target).not('.init').each(function() {
            console.log('test')
            $(this).addClass('init');
            var map = new_map($(this));
        });
    });

    if ($(this).is(':visible')) {

        alert("shown")
    }

})(jQuery);

• James

• October 14, 2016 at 5:24 pm

Hi @walkers_inspiration

I’m afraid this issue is more related to Google Map and Bootstrap. Could you please visit their communities instead?

Thanks 🙂