How to remove increment from Kmllayers in Google Maps?

Question

I have a list of items (in the code below two buttons) in which click on each one and open a modal with a map with its given KML. When it is clicked on the first item, the polygon of the item appears, but when it is clicked on the next item, it opens the polygon of the first item and the second in which it was clicked. I believe what’s happening is an increment of Layers on the map, which I don’t want to see. See:

var map;        
function initialize() {

  var mapProp = {
    zoom: 14,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
};

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", resizingMap);

$('#myMapModal').on('show.bs.modal', function(e) {
  resizeMap($(e.relatedTarget).data('href'));
  //resizeMap();
})

function resizeMap(kml) {
  if(typeof map =="undefined") return;
  setTimeout( function(){
    resizingMap(kml);
  } , 400);
}
function resizingMap(kml) {       
  if(typeof map =="undefined") return;
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  
  var ctaLayer = new google.maps.KmlLayer({
          url: kml,
          map: map
        });
}

#map-canvas {
    height: 400px;
    width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row text-center">
        <a href="#" data-href='https://s3-sa-east-1.amazonaws.com/stilldev/kmls/1494082535.KML' class="btn btn-lg btn-success"  data-toggle="modal" data-target="#myMapModal">Add 1</a>
      <a href="#" data-href='http://stilldev.s3.amazonaws.com/kmls/1494088425.KML' class="btn btn-lg btn-success" data-toggle="modal" data-target="#myMapModal">Add 2</a>
  </div>
  <hr>
</div>

<div class="modal fade" id="myMapModal" tabindex='-1'>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                         <h4 class="modal-title">Mapa</h4>

                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div id="map-canvas" class=""></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        <!-- /.modal-dialog -->
        </div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfXgMUO82be1sHgJlXHdg4JkTgN7qtm-M&callback=initMap"
          type="text/javascript"></script>

How can I remove Kmllayers increment on Google Maps by showing one polygon at a time?

Answer 1

The only change I made was to define the variable ctaLayer overall and, before defining the new layer, clear the map with ctaLayer.setMap(null), thus, if there is layers previous, it excludes. To ensure that ctaLayer has the method setMap at the first execution, I initiated it along with map, passing by null as a parameter.

var map, ctaLayer;

function initialize() {

  var mapProp = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
  ctaLayer = new google.maps.KmlLayer(null);
};

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", resizingMap);

$('#myMapModal').on('show.bs.modal', function(e) {
  resizeMap($(e.relatedTarget).data('href'));
  //resizeMap();
})

function resizeMap(kml) {
  if (typeof map == "undefined") return;
  setTimeout(function() {
    resizingMap(kml);
  }, 400);
}

function resizingMap(kml) {
  if (typeof map == "undefined") return;
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");

  ctaLayer.setMap(null);
  ctaLayer = new google.maps.KmlLayer({
    url: kml,
    map: map
  });
}

#map-canvas {
  height: 400px;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row text-center">
    <a href="#" data-href='https://s3-sa-east-1.amazonaws.com/stilldev/kmls/1494082535.KML' class="btn btn-lg btn-success" data-toggle="modal" data-target="#myMapModal">Add 1</a>
    <a href="#" data-href='http://stilldev.s3.amazonaws.com/kmls/1494088425.KML' class="btn btn-lg btn-success" data-toggle="modal" data-target="#myMapModal">Add 2</a>
  </div>
  <hr>
</div>

<div class="modal fade" id="myMapModal" tabindex='-1'>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Mapa</h4>

      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div id="map-canvas" class=""></div>
          </div>
        </div>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfXgMUO82be1sHgJlXHdg4JkTgN7qtm-M" type="text/javascript"></script>

I also removed the part &callback=initMap of the URL of the Google Maps API that generated an error here, since the function initMap is not implemented.