弹出的模式中没有显示谷歌地图标记的中心

Question

我使用下面的代码在模态弹出窗口中显示Google地图。但Google地图标记不会显示在模式的中心。它始终隐藏在左下角。

<script>
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(0.0, 0.0);
    var mapOptions = {
      zoom: 14,
      center: new google.maps.LatLng(0.0, 0.0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  }


  function codeAddress(i) {       

    var address = document.getElementById('address'+i).value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            zoom:10,
            position: results[0].geometry.location
        });

        google.maps.event.addListenerOnce(map, 'idle', function () {
        google.maps.event.trigger(map, 'resize');
        });

        } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });

  }   

 </script>

另外see the code here

Answer 1

这也可能与Google map modal issue有关。

请尝试使用@SSR给出solution的模态事件处理程序：

  

Bootstrap模态映射问题解决方案：

$(document).ready(function(){
  $('#locationMap').on('shown.bs.modal', function(){
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195));
  });
});

此相关SO post中的解决方案也可能有所帮助。