Reputation: 35
I am using bootstrap accordion that contain a Google Map API, but the map doesn't display. I have tried map resize method, but it still not work, here is my code.
html:
<a class="map-button" data-toggle="collapse" data-target="#map">View Map</a>
<div id="map" class="collapse ">
<div id="google-map" data-latitude="3.1234" data-longitude="101.1234"></div>
</div>
css:
.map-button{
width:100%;
display:block;
height: auto;
text-align: center;
font-size: 20px;
cursor: pointer;
color:#fff;
padding:30px 0px;
font-weight:600;
transition: all 0.7s;
-webkit-transition: all 0.7s;
}
#google-map {
height: 350px;
width:100%;
}
Map Script:
//Google Map
var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 14,
scrollwheel: false,
disableDefaultUI: true,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var contentString = '';
var infowindow = new google.maps.InfoWindow({
content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize_map);
google.maps.event.addDomListener(window, 'resize', function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
What am I doing wrong?
Upvotes: 3
Views: 4363
Reputation: 2723
Updated your fiddle to answer your question visible here: https://jsfiddle.net/4gLaobzh/
Relevant changes are as follows:
Replaced:
google.maps.event.addDomListener(window, 'load', initialize_map);
google.maps.event.addDomListener(window, 'resize', function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
With:
initialize_map();
$('#map').on('hidden.bs.collapse', function () {
initialize_map();
})
$('#map').on('shown.bs.collapse', function () {
initialize_map();
})
In essence the issue was that you were listening to the wrong events. Window resize will only be triggered when there is a change to the browser window and not merely to a div contained within. Instead I've hooked the map instantiation into the accordion expand and collapse events/ Note that these functions will only be triggered from Bootstrap version 3 and up, for lower versions use:
$('#map').on('hidden', function () {
initialize_map();
})
$('#map').on('shown', function () {
initialize_map();
})
EDIT: You were also including the maps library twice. Removed the none-sensor version served over http to avoid mixed content warning.
Upvotes: 4