Home › Forums › General Issues › Using Google maps field with bootstrap collapse
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);
I’m afraid this issue is more related to Google Map and Bootstrap. Could you please visit their communities instead?
Thanks 🙂
The topic ‘Using Google maps field with bootstrap collapse’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.