谷歌地图标记未在模态弹出中心显示答案

【问题标题】：Google map marker not displayed center in Modal pop up谷歌地图标记未在模态弹出中心显示
【发布时间】：2016-10-26 07:16:36
【问题描述】：

我正在使用下面的代码在模式弹出窗口中显示 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

【问题讨论】：

使用示例页面更容易:) 首先，它们没有使用您的 LatLng var。删除它（或使用它:)）据我了解，地图空闲时会调用地图重绘。您确定触发了空闲事件吗？
我动态地从我的变量中获取 LatLng。它的工作很好。我也看到了标记。问题是它显示左角。如何将这个移动到地图中心？请帮忙
手动 map.setCenter(latLng) 能解决您的问题吗？如果是，则表示您的地图中心没有被 gmap 很好地使用。在这种情况下，只需在重绘后设置地图中心即可。
重绘后如何设置地图中心。您能否用我发送的代码进行修改和解释。我是这里的新手。

标签： javascript php google-maps

【解决方案1】：

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

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

Bootstrap Modal Map 问题解决方案：

$(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 中的解决方案也可能有所帮助。

【讨论】：