Namely, I’m working on an app that allows users to mark certain parts of the land on the map (by drawing shapes) and then get feedback information about the size of that land. Also, there is an option to exclude certain parts on the marked land (for example if there is a house and they don’t want to calculate it in the total results).
Now, the part where I got stuck is this: I’ve created X buttons that would allow the users to easily remove the whole shapes for the marked land (colored with black) or for the excluded parts (colored with red). Still, clicking on those X buttons triggers no action for some reason.
I believe that the cause lies in the functions, but I cannot confirm that. I can only forward the ones I’ve came up with that doesn’t work:
Here are the functions I’ve tried using for removing the land and exclusion shapes:
function removeLand(landIndex) {
const land = areas[landIndex];
// Remove the overlay from the map
land.overlay.setMap(null);
// Remove all exclusion overlays from the map
land.exclusions.forEach(exclusion => exclusion.overlay.setMap(null));
// Remove the land from the areas array
areas.splice(landIndex, 1);
// Update the display
updateDisplay();
}
function removeExclusion(landIndex, exclusionIndex) {
const exclusion = areas[landIndex].exclusions[exclusionIndex];
// Remove the exclusion overlay from the map
exclusion.overlay.setMap(null);
// Remove the exclusion from the exclusions array
areas[landIndex].exclusions.splice(exclusionIndex, 1);
// Update the display
updateDisplay();
}
Now, since I cannot guarantee that the issue lies in these functions, maybe it is in some other parts of my code, I will here share the GitHub page where I’ve updated the HTML and JS, and they are currently configured:
https://github.com/NoToolsNoCraft/Google-Map-Land-Size-Calculator/tree/main/Version%20with%20the%20X%20button%20not%20working