How to delete all polygons in Google Maps API

I have a satellite beam design web page (link above) where you generate multiple polygons representing the beam contour coverage patterns on the earth's surface.

Once a user has designed one or more beams they may wish to start again. If they refresh the page this costs me money for each refresh, so I have added a button so the user may delete all polygons from the map and start again.

Right at the beginning of the Google Maps API javascript code it now starts like so:

<script>

var map;

var pushedpolys = [];

The new bit var pushedpolys = [ ] is an array. I am calling the array pushedpolys. This array will contain a string of characters representing several polygons. pushedpolys is used to accumulate all the arrays of the individual polylines, one after the other. You could call the array "collectionofpolygons" if you wanted. The word 'pushed' refers to the way new polygons get added into the big array in sequence. The only purpose of doing this is to make possible later multiple deletion, if required.

Later on in the <script> is the part that actually draws each polyline onto the Google Map, using beamcontour.setMap(map); Your own map drawing page will have something similar with a different word in front of .setMap(map);

var beamcolour;

beamcolour="#0000ff";

var beamcontour = new google.maps.Polyline({

path: roundthebeam,

strokeColor: beamcolour,

strokeOpacity: 1.0,

strokeWeight: 2

});

pushedpolys.push(beamcontour);

beamcontour.setMap(map);

Note that roundthebeam[] is my array of all the lat long points for this particular contour.

The new bit is pushedpolys.push(beamcontour); This adds, by pushing, the current beamcontour string into the pushedpolys array which will now comprise all previous and the current beamcontour strings.

We can now add a function which may be called to do the multiple erasing on the polygons, thus:

function clearbeams(){

for (i=0; i<pushedpolys.length; i++)

{

pushedpolys[i].setMap(null);

}

}

When called, this function goes through all the polylines, using the data within pushedpolys, deleting as it goes along.

( I think you can do something similar to delete all Markers in one go, in which case you would need to accumulate (push) data for each marker into a composite marker string. You would then be able to delete all Markers in one function. )

Finally you need to add a way for the user to call the clearing function, in this case I'm using a button.

This goes in the html code like so:

<p><input onclick="clearbeams()" type="button" value="Clear all contours"></p>

I hope it works for you !

Best regards, Eric

Feedback on technical errors or problems with this page welcome to: eric@satsig.net Many thanks.

Page started 19 May 2024, amended 28 May 2024.