谷歌地圖不工作在引導模式

Question

我想添加谷歌地圖在引導地圖，但它不適合我。當我點擊鏈接時，它會打開模式窗口，但地圖顯示不正常，之前工作正常，但我不知道現在發生了什麼。

直播鏈接，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