Google map not working in bootstrap modal

Question

I am trying to add google map in bootstrap map but its not working for me. When i click on link, it opens modal window but map is not showing properly, it is working fine before but i dont know, what happened now.

Live link, link to site

Here is my code:

JS:

var map;
 myLatlng = new google.maps.LatLng(4.7123724,-74.0704297);
 function initialize() {
        var mapOptions = {
          center: myLatlng,
          zoom: 18,
          mapTypeControl: false,
          center:myLatlng,
          panControl:false,
          rotateControl:false,
          streetViewControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        var contentString = '<div id="mapInfo">'+
        '<strong>Carrera 58 # 127-29</strong><br>' +
        'Bogotá, Cundinamarca<br>'+
        'Colombia'+
        '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:"Carrera 58 # 127-29, Bogotá, Cundinamarca, Colombia",
              maxWidth: 200,
              maxHeight: 200
      });



      google.maps.event.addListener(marker, 'click', function() {
         infowindow.open(map,marker);
      });
  }

      google.maps.event.addDomListener(window, 'load', initialize);

  //start of modal google map
  $('#mapmodals').on('shown.bs.modal', function () {
      google.maps.event.trigger(map, "resize");
      map.setCenter(myLatlng);
  });
  //end of modal google map

HTML:

<a href="#mapmodals" role="button" data-toggle="modal"><i class="icon"></i> Launch Map Modal</a>

  <!-- MAP -->
  <div class="modal fade" id="mapmodals">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myCity">Carrera 58 # 127-29, Bogotá, Cundinamarca, Colombia</h4>
        </div>
        <div class="modal-body">
            <div class="map_container">
                <div id="map_canvas" class="map_canvas"></div>
            </div>
        </div>
        <div class="modal-footer">
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

Answer 1

Trigger the resize -event of the map when the modal has been opened:

jQuery('#mapmodals')
 .on('shown.bs.modal',
      function(){
        google.maps.event.trigger(map,'resize',{});
        map.setCenter(myLatlng);
     });

Answer 2

Your code is not properly working for me so I add

google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(contentString);
    infowindow.open(map, marker);

}); 

Thanks,

Answer 3

Add this jquery plugins

1. http://maps.google.com/maps/api/js?sensor=false&libraries=places '
2. locationpicker.jquery.js