How to completely remove parsed geoXml from map

Question

how to remove drawn kml shape from map which is parsed by geoXml3 so that we can parse and draw a newone. I am only seeing method of hideDocument and showDocument on geoXml but it doesn't completely remove.

let filename = "http://localhost:5002/Nevada-2.kml";
let myLocation = { lat: 36.737061, lng: -119.7912549 };

function initialize() {
    let lat = 43.502745;
    let lng = -116.240845;
    myLatLng = new google.maps.LatLng(lat, lng);

    let zoom = 12;

    let myOptions = {
        zoom,
        center: myLatLng,
    };

    // create the map
    let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    let geoXml = new geoXML3.parser({
        map: map,
    });
    geoXml.parse(filename);

    google.maps.event.addListenerOnce(geoXml, "parsed", function () {
        let exist = false;
        for (let i = 0; i < geoXml.docs[0].placemarks.length; i++) {
            let placemark = geoXml.docs[0].placemarks[i];
            if (placemark.polygon) {
                if (
                    google.maps.geometry?.poly.containsLocation(
                        new google.maps.LatLng(myLocation),
                        placemark.polygon
                    )
                ) {
                    exist = true;
                    break;
                }
            }
        }

        if (exist) {
            new google.maps.Marker({
                map: map,
                position: myLocation,
            });
            console.log("EXIST");
        } else {
            console.log("Doesn't Exist");
            console.log("geoXml: ", geoXml);
        }
    });
}

remove drawn kml shape from map which is parsed by geoXml3

Answer 1

Not sure why you want to completely remove the geoXml object.

If you want to do that remove the let from its declaration then use delete geoXml; to delete it.

If you want to make it so geoXml.showDocument() doesn't display the loaded polygon (or markers or polylines), call geoXml.hideDocument() (to hide all the objects associated with that KML), then use geoXml.docs.splice(0); to remove that document's saved data.

change the posted code to this (will remove that data when exist is false):

  if (exist) {
    new google.maps.Marker({
      map: map,
      position: myLocation,
    });
    console.log("EXIST");
  } else {
    console.log("Doesn't Exist");
    console.log("geoXml: ", geoXml);
    geoXml.hideDocument();
    geoXml.docs.splice(0);
    console.log("geoXml: ", geoXml);
    geoXml.showDocument();  // has no effect
  }

working code snippet:

var map;
var geoXml;
let myLocation = {
  lat: 36.737061,
  lng: -119.7912549
};

function initialize() {
  let lat = 43.502745;
  let lng = -116.240845;
  myLatLng = new google.maps.LatLng(lat, lng);

  let zoom = 12;

  let myOptions = {
    zoom,
    center: myLatLng,
  };

  // create the map
  let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  let marker = new google.maps.Marker({
    position: myLocation,
    map: map
  });
  geoXml = new geoXML3.parser({
    map: map,
  });

  geoXml.parseKmlString(kml_string, geoXml.docs[0]);
  // google.maps.event.addListenerOnce(geoXml, "parsed", function() { // parseKmlString is sychronous, no need to wait for event
  let exist = false;
  for (let i = 0; i < geoXml.docs[0].placemarks.length; i++) {
    let placemark = geoXml.docs[0].placemarks[i];
    if (placemark.polygon) {
      if (
        google.maps.geometry.poly.containsLocation(
          new google.maps.LatLng(myLocation),
          placemark.polygon
        )
      ) {
        exist = true;
        break;
      }
    }
  }

  if (exist) {
    new google.maps.Marker({
      map: map,
      position: myLocation,
    });
    console.log("EXIST");
  } else {
    console.log("Doesn't Exist");
    console.log("geoXml: ", geoXml);
    geoXml.hideDocument();
    geoXml.docs.splice(0);
    console.log("geoXml: ", geoXml);
    geoXml.showDocument();
  }
  // });
}

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

var kml_string =
  '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2"><Document><name>Untitled Project</name><Style id="polystyle"><LineStyle><color>ffd27619</color><width>3</width></LineStyle><PolyStyle><color>40d27619</color></PolyStyle></Style><Placemark id="0EFB380192295F306ADE"><name>Nevada</name><styleUrl>#polystyle</styleUrl><Polygon><outerBoundaryIs><LinearRing><coordinates>-119.9458168217553,42.09815848435698,1743.184968098506 -120.0136280431517,39.03898130098839,2759.571314474606 -114.6631133100423,35.02872903370762,148.2287681444774 -114.5754736462533,35.17759811926493,79.29195844202908 -114.7826439443366,36.09795001682222,504.6518724848692 -114.3826515827073,36.16850980887606,437.3265696852947 -114.2618037412561,35.94731934456748,1150.628738692156 -114.1585582237959,36.05914932215794,850.8799007465507 -114.0253602522288,36.21632653587633,722.0045967883513 -114.0424536177013,42.04153913557552,1577.542008078014 -119.9458168217553,42.09815848435698,1743.184968098506</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document></kml>';

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Import KML</title>
</head>

<body>
  <div id="map_canvas"></div>

</body>

</html>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js"></script>