CODEWITHSUNDEEP
javascripttwitter-bootstrapgoogle-maps-api-3
Leong Js
Leong Js

Reputation: 35

Google Maps not work inside bootstrap accordion

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); 
});

Fiddle

What am I doing wrong?

Upvotes: 3

Views: 4363

Answers (1)

ChrisSwires
ChrisSwires

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

Related Questions