Uncaught TypeError: Невозможно прочитать свойство 'zoom' для null - AJAX Dynamic Create Map

Question

У меня есть следующий скрипт, который выполняется по запросу AJAX, он является частью более крупного скрипта, который собирает сведения о доноре, которого я пытаюсь переработать на основе более поздней версии Google Maps:

                    var map = new google.maps.Map(document.getElementById('map'), {
                        });
                    var bounds  = new google.maps.LatLngBounds();

                    $.each(data[1].locations, function(i, item) {

                        var marker = new google.maps.Marker({
                          position: {lat: parseFloat(item.latitude), lng: parseFloat(item.longitude)},
                          map: map,
                          title: ''
                        });
                        var loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
                        bounds.extend(loc);

                    });

                    map.fitBounds(bounds);       // auto-zoom//
                    map.panToBounds(bounds);     // auto-center//

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

Наряду с этой ошибкой (Uncaught TypeError: Невозможно прочитать свойство 'zoom' с нулевым значением), когда я пытаюсь увеличить его (хотя оно дает мне "Use ctrl +"scroll .... "сообщение, когда я пытаюсь выполнить прокрутку.

Теперь предыдущий сборщик имел набор сценариев, которые входили в один модал, так что это был в основном один общий модал без реального кода, кромеверхний колонтитул, заголовок, тело и нижний колонтитул, а затем, когда что-то нужно сделать, элементы, необходимые для этого конкретного действия, будут созданы скриптом. Я в порядке, если я так и сделаю, но неправда, в данном случае все равно, должен ли элемент карты уже существовать, чтобы это работало?

Я бы хотел, чтобы он видел карту с несколькими местоположениями и имел возможность масштабировать и центрироватьв группе маркеров выше.Я думал, что у меня все правильно, но ничего, что я пробую, не работает в данный момент.

Спасибо!

// ОБНОВЛЕНИЕ С НАЧАЛЬНЫМ МОДАЛЬНЫМ КОДОМ //

<!-- Modal (View Scan) -->
<div class="modal fade generalModal" id="generalModal" aria-labelledby="myModalLabel" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">


      </div>
      <div class="modal-footer">
      </div>
    </div>

  </div>
</div>

// ОБНОВЛЕНИЕС ДИНАМИЧЕСКИ СОЗДАННЫМ HTML, который создает div #map перед сценарием, который на самом деле создает google.maps

$('#generalModal').find('.modal-body').html('<button type="button" class="btn btn-default btn-addCustomerContact btn-truckinEntityButton" data-id="'+data[0].customer.id+'"><i class="fa fa-plus"></i> Add Contact</button><button type="button" class="add-customer add-location btn btn-default btn-truckinEntityButton" data-toggle="modal" data-target="#createAddress"><i class="fa fa-plus"></i> Add Location</button><table class="table"><tbody><tr><td><h4 class="supTitle">Details</h4></td><td></td><td></td><td></td></tr><tr><td class="labelName">Account Type:</td><td>'+account+'</td><td class="labelName">Account No:</td><td class="fieldName vaT">'+accountNo+'</td></tr></tbody></table><div class="horiLine2"></div><div class="row"><div class="col-md-12"><h4 class="supTitle">Contact(s)</h4></div></div><div class="row"><div class="col-md-12"><table id="customerDetailsModalContacts" class="table table-striped"><tbody></tbody></table><div class="horiLine2"></div><div class="row"><div class="col-md-12"><h4 class="supTitle">Location(s)</h4></div></div><div class="row"><div class="col-md-4"><table id="customerDetailsModalLocations"><tbody></tbody></table></div><div class="col-md-8"><div id="map"></div></div></div>');