基于用户输入实现多Google Maps实例的技术咨询

用户可在表单中添加额外地点字段，每个字段旁设有按钮，点击可打开包含Google Map的模态框以选择地点。当前代码仅支持单个地点，用户可点击添加多个地点，但现有单地图实现代码如下：

var geocoder1 = new google.maps.Geocoder();
var marker1 = null;
var map1 = null;
function initialize1() {
      var $latitude = document.getElementById('latitude');
      var $longitude = document.getElementById('longitude');
      var latitude = 51.21325734558688
      var longitude = 4.452420938900765;
      var zoom = 16;

      var LatLng = new google.maps.LatLng(latitude, longitude);

      var mapOptions = {
        zoom: zoom,
        center: LatLng,
        panControl: false,
        zoomControl: false,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      map1 = new google.maps.Map(document.getElementById('map'), mapOptions);
      if (marker1 && marker1.getMap) marker1.setMap(map1);
      marker1 = new google.maps.Marker({
        position: LatLng,
        map: map1,
        title: 'Drag Me!',
        draggable: true
      });

      google.maps.event.addListener(marker1, 'dragend', function(marker1) {
        var latLng = marker1.latLng;
        $latitude.value = latLng.lat();
        $longitude.value = latLng.lng();
      });


    }
    initialize1();
    $('#findbutton').click(function (e) {
        var address = $("#Postcode").val();
        geocoder1.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map1.setCenter(results[0].geometry.location);
                marker1.setPosition(results[0].geometry.location);
                $(latitude).val(marker1.getPosition().lat());
                $(longitude).val(marker1.getPosition().lng());
            } else {
                alert("Geocode is mislukt met volgende fout: " + status);
            }
        });
        e.preventDefault();
    });

现在需要支持用户添加多个地点（比如5个），每个对应带Google Map的模态框。尝试过通过点击事件动态添加JS代码但无效，求实现思路或建议，不要现成解决方案。

• 抽象地图实例逻辑：把单个地图的初始化、标记拖拽、地址解析逻辑封装成可复用的函数或类，每个地点实例传入对应的DOM元素标识（比如模态框内的地图容器、纬度/经度输入框、地址输入框），避免用map1、marker1这类硬编码变量名，改用实例化对象存储每个地图的相关引用。
• 动态生成带唯一标识的DOM结构：每次用户点击“添加地点”按钮时，生成一套包含以下元素的DOM结构，所有元素的ID或自定义属性带上唯一索引（比如_0、_1）：
  • 地点相关输入字段（纬度、经度、邮编/地址）
  • 打开模态框的按钮（带data-index标记对应实例）
  • 模态框容器（内含地图容器，ID如map_0）
• 事件委托替代动态绑定：不给每个新生成的按钮单独绑定点击事件，而是将点击事件委托到表单父容器上，通过按钮的data-index属性区分对应地点实例，再触发该实例的地图初始化或地址解析逻辑。
• 延迟初始化地图：不要页面加载时就初始化所有地图，而是在用户点击对应按钮打开模态框时，再初始化该模态框内的地图实例，减少初始加载资源消耗。
• 统一管理地图实例：用数组或对象存储所有已创建的地图实例，比如mapInstances = []，每次实例化新地图时推入数组，方便后续统一操作（比如销毁、更新）。

内容的提问来源于stack exchange，提问作者MisterS