How to remove KmlLayers increment in Google Maps?

Navigation
0

I have a list of items (in the code below two buttons) in which to click on each one and opens a modal with a map with its particular KML. When you click on the first item, the polygon for the item appears, but when you click on the next item, it opens the polygon for the first item and the second on which it was clicked. I think what's happening is an Layers increment on the map, which I do not want to happen. 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><linkrel="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><divclass="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 in Google Maps, showing one polygon at a time?

    
asked by anonymous 06.05.2017 / 21:47

1 answer

2

The only change I made was to set the ctaLayer variable globally and, before setting the new layer , clean the map with ctaLayer.setMap(null) , so if there is layers , it deletes. To ensure that ctaLayer has the setMap method on the first run, I started it together with map , passing 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><linkrel="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><divclass="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 &callback=initMap part of the Google Maps API URL that caused an error here, since the initMap function is not implemented.

    
06.05.2017 / 23:49
modelBuilder add only one variable with different varchar Permissions error when trying to send a file with PHP