在ajax成功中显示多个谷歌地图

Question

我有以下内容：

$(document).ready(function(){


    // include foundation clearing first so it's available later
      $.getScript('/static/js/foundation/foundation.clearing.js');
      $.getScript('/static/js/foundation/foundation.orbit.js');
        $(".compare").each(function(){
          $(this).append("<span class='left open hide-for-small'><i class='fa fa-chevron-down'></i><span class='text'>Show more</span></span>");
        });
      $('.compare span.left').on('click', function(e){

        var language = $("html").attr("lang"); 
        e.preventDefault();
          $('.show-more').fadeOut();
          var that = $(this),
            propID = that.parent().parent().data("id"),
            current = that.parent().parent();
          if(that.hasClass('open')){
            current.find('.text').text('Show less');
              that.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
              that.removeClass('open').addClass('close');
              if(!current.hasClass('ajax-called')) {
                $.ajax({
                  url: 'xxxxxxxxxxxxxxxxxxxxx/'+propID, 
                  dataType: 'json', 
                  headers: {  
                    "Accept-Language": language
                  },
                  success: function(data) {
                    current.addClass('ajax-called');
                    current.css('padding-bottom', '56px');
                    });
                    // *******************************************************map******************************************************
                    current.find('.thumbs-holder').after("<div id='m-" + $(current).data('id') + "'></div>");
                    var myLatLngCurrent = {lat: parseFloat(data.latitude), lng: parseFloat(data.longitude)};
                    var map = new google.maps.Map(document.getElementById("m-" + $(current).data("id")), {
                      zoom: 18,
                      center: myLatLngCurrent
                    });
                    var marker = new google.maps.Marker({
                      position: myLatLngCurrent,
                      map: map,
                      zoom: 10
                    }); 
                    google.maps.event.trigger(map, "resize");
                  }, cache: false
                });
              }
          }
          else {
            current.css('padding-bottom', '.5rem');
            that.removeClass('close').addClass('open');
            current.find('.show-more').fadeOut();
            that.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
                current.find('.text').text('Show more');
          }
      });

});

HTML

<div class="fabresult data-id="xxx">
  <div class="compare">
    <span class="left"></span>
  </div>
</div>

我称之为ajax成功如下：

                var map;
                var currentMap = new CreateMap(current, data, map);
                currentMap.generateMap();

我的标记中有一个列表，对于每个“li”，我点击一个新的ajax调用来提取一些数据。作为每次调用的一部分，“CreateMap（）”被调用。

我第一次单击地图时显示正确，但在此之后，当我点击一个新的“li”时，我只看到一个绿色的bakground，左下角有谷歌徽标，并且应用了正确的CSS宽度属性，但是不是新地图本身。

这是我第二次点击时得到的结果：