jquery - Change marker color "onclick"

Question

I would like to change the color of selected marker.

I'm using the following code:

// arrays to hold copies of the markers and html used by the side_bar 
// because the function closure trick doesnt work there 
var gmarkers = [];
var map = null;

function initialize() {
    // create the map
    var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(51.519243, -0.126661),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas-big"),
        myOptions);
    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });
    var point = new google.maps.LatLng(51.5608308012934, -0.0540925428914196);
    var marker = createMarker(point, " Clapton ", "<div class='scrittafumetto' id='proprieta_4940'><strong><div class='titolo'> Title</div></strong><br /><a class='mostra_vedi'>Vedi</a></span></div>");
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

google.maps.event.addListener(marker, 'click', function(marker, i) {
    var marker_id = marker.id;


    if ($('#new-overview-main_' + marker_id).css('display') == 'block') {
        $('#new-overview-main_' + marker_id).css('display', 'none');
    } else {
        $('#new-overview-main_' + marker_id).css('display', 'block');
    }

});

function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
}

already tried to add this code

marker.setIcon('https://www.google.com/mapfiles/marker_green.png');

within the "createmarker" function, it works but not how I would like to have.

Basically, it changes the marker color when I click on it but, when I select another marker, the "old" one remain with the "marker_green.png" icon.

What I would like to have is to change the color only for selected marker, in order to recognize the clicked marker among the others.

Any tip? Thanks, Dean.

Answer 1

Try keeping the current marker in a variable and change it when new event fires. Something like:

google.maps.event.addListener(marker, 'click', function() {
 if (currentMarker != null) {
    currentMarker.setIcon('https://www.google.com/mapfiles/marker_red.png');
        currentMarker = null;
   };
 currentMarker = marker;
 marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
}