Uncaught TypeError: Cannot read property 'zoom' of null - AJAX Dynamic Create Map

I have the following script that is done following an AJAX request, it's part of a larger script that pulls up the details of a donor that I'm trying to rework based on a more recent version of 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//

Now, each location is successfully pulled up in the table above that map and I can see the latitudes and longitudes fine, but for some reason it comes up with this in the result:

Along with this error (Uncaught TypeError: Cannot read property 'zoom' of null) when I try to zoom in on it (though it does give me the "Use ctrl + scroll...." message when I try to scroll.

Now, the previous builder had a bunch of scripts go into one modal, so it was basically one general modal with no real code in it except for the header, title, body and footer, and then when something needed to be done, the elements required of that particular action would be created by the script. I am fine with keeping it that way, but don't really care, in this case though, does the map element need to already exist in order for this to work?

I'd like for it to see a map of multiple locations and be able to zoom and center in on the group of markers above. I thought I had it right but nothing I try works at this moment.

Thanks!

//UPDATE WITH INITIAL MODAL CODE//

<!-- 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>

//UPDATE WITH DYNAMICALLY CREATED HTML that creates the #map div prior to the script above that actually creates the 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>');