Question

I have JS code with google maps api.
When I click on a marker I display more markers.
When I click on these markers I display more markers…and so on
I connect all these by polylines and the resulting structure looks like a spider map.
When I click on any marker agian, I want to hide the markers and polylines it created.
How do I create and keep a reference to these polylines and markers which are formed inside the recursive calls of the eventlistener for every parent marker, so that I could later on do a setMap(null);

Answer 1

I haven’t tested it, but I believe you could add an array of shown markers inside a Marker object. It would look somehow like this:

var originalMarkers = new Array();  //load markers you show at the beginning to some array

function onMarkerClick(event) {
    if (marker.childMarkers){
        for (child in marker.childMarkers) {
            child.setMap(null);    
            //and so on, e.g remove polylines
            marker.childMarkers = null;
        }
    }
    else {
        marker.childMarkers = new Array();    
        //load markers you show after click here
    }
}