多张地图不适用于 Google 地图答案

【问题标题】：Multiple maps not working for Google maps多张地图不适用于 Google 地图
【发布时间】：2011-05-05 13:04:11
【问题描述】：

我有一些 jquery（如下）在窗口加载时创建多个地图。但是地图有一些奇怪的行为，但没有错误。

问题是当地图加载时，它们在地图上的位置都相同，即使设置了多个不同的 lng 和 lats。

以下是创建地图的代码和其中一个地图框的一些示例 html。

奇怪的是地图有相同的位置，但没有错误。有没有人经历过这种情况或知道为什么会这样。

干杯。

Js：（假设这被称为onloand并且设置了一些空白的全局数组。）

var maps_boxes = {
    initialise: function() {
        $('.a_map').each(function(index) {
            var map_box = $(this);
            var map_id = map_box.find('.the_map').attr('id');
            var lat = map_box.find('.lat').val();
            var lng = map_box.find('.lat').val();

            lat_lngs[index] = new google.maps.LatLng(lat,lng);          

            options[index] = {
              zoom: 4,
              center: lat_lngs[index],
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            maps[index] = new google.maps.Map(document.getElementById(map_id), options[index]);

        });
    }
};

一张地图的示例html：

<div class="a_map">
  <form class="map_data" >
    lng:<input class="lng" type="text" value="0" /><br />
    lat:<input class="lat" type="text" value="10" />
  </form>
  <div id="map_xxxxx" class="the_map" ></div>
</div>

【问题讨论】：

标签： javascript jquery html google-maps google-maps-api-3

【解决方案1】：

如果您使用发布的相同代码，您将获得相同的纬度和经度值：

    var lat = map_box.find('.lat').val();
    var lng = map_box.find('.lat').val();

我尝试在同一页面上初始化 2 个不同的地图，它工作正常。

【讨论】：