Google Maps Hide Marker

Question

I have a problem. I’m having trouble deleting Markers from Google Maps. The intention is when you click on a Radio Button, mark a place, and remove the others.

When I click on a Radio Button, it works, and marks a point on the map. However when I click on another Radio, it does not erase the points already marked

HTML:

<div id="mapa" class="hidden-xs"></div>

<div id="mapa-lugares">
    <input type="radio" name="lugar" value="lugar1">lugar 1</input>
    <input type="radio" name="lugar" value="lugar2">lugar 2</input>    
</div>

Java Script:

<script src="http://maps.googleapis.com/maps/api/js?key=MINHA_KEY&amp;sensor=false"></script>

<script>
var map; 
var markers = [];

var lat2 = "-19.212355602107472";
var lng2 = "-44.20234468749999";


$("input[name = 'lugar']").click(function(){

    if($('input:radio[name = lugar]:checked').val() == "lugar1"){
     marcarPonto(lat2 , lng2);
        alert($('input:radio[name = lugar]:checked').val());

    }

     if($('input:radio[name = lugar]:checked').val() == "lugar2"){
     deleteMarkers();       
        alert($('input:radio[name = lugar]:checked').val());

    }
});



function initialize(){
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);   
    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };  
    map = new google.maps.Map(document.getElementById("mapa"), options);
}

function marcarPonto(lat , lng){    
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat , lng),
        title: "Meu ponto personalizado! :-D"
        //icon: 'img/marcador.png'
    });
    marker.setMap(map); 

}

function deleteMarkers() {
    clearMarkers();
    markers = [];
}

initialize();

</script>

Answer 1

You didn’t set the function 'clearMarkers'.

function clearMarkers() {
    setMapOnAll(null);
}