Question

我正在尝试在bootstrap地图中添加谷歌地图，但它不适合我。当我点击链接时，它会打开模态窗口，但地图显示不正常，之前工作正常，但我不知道，现在发生了什么。

这是我的代码：

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 - 事件：

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插件

http://maps.google.com/maps/api/js?sensor=false&libraries=places＆＃39;
locationpicker.jquery.js

Google地图无法使用bootstrap模式

3 个答案: