Edit in JSFiddle

JavaScript
HTML
CSS
Result

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)
{
    if (markersArray)
    {
        for (i in markersArray)
        {
            markersArray[i].setMap(null);
        }
    }
    marker = new google.maps.Marker(
    {
        position: location,
        map: map
    });
    markersArray.push(marker);
}

<html>
<head>
<title>Google Maps JavaScript API v3 Example: Marker Overlay Removal</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 id="map" style="width:530px; height:230px">
</div>
</body>
</html>