使用AJAX标签切换地图-Google Maps API

Question

我正在尝试使用Google Maps API v3 JS代码设置Google Maps。 我有多个标签，单击这些标签可以打开AJAXed内容页面，而无需重新加载原始页面。 每个选项卡式内容都包含一个地图。 以下是我如何设置地图的示例。 请注意，这里的list元素只是一个示例，每个选项卡包含许多位于不同位置的项目。

<script type="text/javascript">
var locations = new Array();
</script>
<div id="googlemap"><div>Loading..</div></div>
<ul>
    <li>#1 - My Place, Euless, TX
    <script type="text/javascript">
        locations.push(['#1 - My Place','Euless, TX']);
    </script>
    </li>
    <li>#2 - My Other Place, Dallas, TX
    <script type="text/javascript">
        locations.push(['#2 - My Other Place','Dallas, TX']);
    </script>
    </li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#googlemap div').remove();
    if(locations.length>0)
    {
        var map = new google.maps.Map(document.getElementById('googlemap'), {
          zoom: 3,
          center: new google.maps.LatLng(38.065392,-97.382812),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i=0;i<locations.length;i++) {
            var thelocation = locations[i];
            jQuery.ajax({
                dataType: 'jsonp',
                url: 'http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&key=BLAHBLAH&q='+thelocation[1],
                cache: false,
                success: function(data){
                    if(data.Status.code==200)
                        {
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(data.Placemark[0].Point.coordinates[1],data.Placemark[0].Point.coordinates[0]),
                                map: map
                            });
                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                    infowindow.setContent(thelocation[0]);
                                    infowindow.open(map, marker);
                                }
                            })(marker, i));
                        }
                }
            });
        }
    }
});
</script>

我目前在销毁先前的地图并加载到新地图时遇到很多麻烦。 加载选项卡式内容后，地图元素将显示向左上移。 Google Maps UI仍显示在正确的位置，但是地图内容本身向上/向左移动。 拖动地图时，它会稍微移动直到某个点，然后该点的可见区域将被裁剪回该相同的视图区域。 有人可以帮我通过AJAX加载新地图吗？

Answer 1

您必须创建一个触发器，以将DIV大小更改与地图的resize事件关联。

当div更改大小时，开发人员应在地图上触发此事件：google.maps.event.trigger（map，'resize'）。