Gmaps.js does not load inside bootstrap modal

Question

hello world i'm using gmaps.js i have a problem which i cant fix and the problem is when i create the map div it works perfectly but when i put the div(map container) inside a bootstrap modal it does not load or show anything i think it has something to do with the "display" property in css but i cannot fix that thanks for your help this is my code

inside document ready function

  map = new GMaps(
 {
   el: '#map',
   lat:36.184164,
   lng:43.975181,
   click:function (e) {
    console.log(e.latLng.lat());
 }
});

this is my bootstrap row inside the modal

 <div class="row" style="background: red;">
    <div class="col-lg-12">
            <div id="map"></div>
    </div>
</div>

Answer 1

You need to call modal manually with

$('#myModal').modal('show')

After that you need to initialize Gmaps in modal 'shown.s.modal' event callback like this:

$('#myModal').on('shown.bs.modal', function (e) {
  map = new GMaps({
   el: '#map',
   lat:36.184164,
   lng:43.975181,
   click:function (e) {
    console.log(e.latLng.lat());
   }
  });
});

Working JSFiddle: http://jsfiddle.net/9n4592jv/1/

Answer 2

Maybe it's just a css problem? Try the following styles for example

#map {
    width: 300px;
    height: 200px;
}