Edit in JSFiddle

var map;
var markersArray = [];
function initialize()
{
    map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 7,
        center: new google.maps.LatLng(22.7964,79.5410),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListener(map, 'click', function(event)
    {
        addMarker(event.latLng);
    });
}
 
function addMarker(location)
{
    marker = new google.maps.Marker(
    {
        position: location,
        map: map
    });
    markersArray.push(marker);
}

function clearOverlays()
{
    if (markersArray)
    {
        for (i in markersArray)
        {
            markersArray[i].setMap(null);
        }
    }
}

function showOverlays()
{
    if (markersArray)
    {
        for (i in markersArray)
        {
            markersArray[i].setMap(map);
        }
    }
}

function deleteOverlays()
{
    if (markersArray)
    {
        for (i in markersArray)
        {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }
}

<html>
<head>
<title>Google Maps JavaScript API v3 Example: Overlay Removal & Deletion</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
</head>
<body onload="initialize()">
<div align="center" style="width: 530px; height: 35px">
    <input onclick="clearOverlays();" type=button value="Clear Overlays"/>
    <input onclick="showOverlays();" type=button value="Show All Overlays"/>
    <input onclick="deleteOverlays();" type=button value="Delete Overlays"/>
</div>
<div id="map" style="width:530px; height:195px">
</div>
</body>
</html>