Javascript 未捕获类型错误：无法读取属性'；缩放'；null-AJAX动态创建映射的实现

我有以下脚本是根据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:无法读取null的属性“zoom”（缩放）（尽管在尝试滚动时，它确实会给我“Use ctrl+scroll…”消息）

现在，以前的构建器有一堆脚本进入一个模式，所以它基本上是一个通用模式，除了页眉、标题、正文和页脚之外，没有真正的代码，然后当需要做一些事情时，特定操作所需的元素将由脚本创建。我可以这样做，但不要这样做但是，在这种情况下，真的很关心map元素是否需要已经存在才能正常工作

我希望它能看到多个位置的地图，并能放大和居中于上面的标记组。我认为我做对了，但目前我尝试的都不管用

谢谢

//使用初始模态代码进行更新//

<!-- 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代码吗？@NickDuncan-我已经在上面添加了更新。

$('#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>');