Google map не работает в bootstrap modal

Question

Я пытаюсь добавить карту google в карту начальной загрузки, но она не работает для меня. Когда я нажимаю на ссылку, она открывает модальное окно, но карта не отображается должным образом, она работает нормально, но я не знаю, что произошло сейчас.

Живая связь, link to site

Вот мой код:

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

Активизируйте resize -Event карты, когда модальный был открыт:

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

Answer 2

Ваш код не работает должным образом для меня, так что я добавить

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

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

}); 

Спасибо,

Answer 3

Добавить это Jquery плагины

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