Несколько карт не работают для карт Google

Question

У меня есть несколько 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>

Answer 1

Если вы используете тот же код, который вы разместили, вы получите одинаковое значение как для широты, так и для долготы:

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

Я попытался инициализировать 2 разные карты на одной странице, все работает нормально.