CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
jezorama
jezorama

Reputation: 357

How to tell if a Google Map Marker is currently selected?

I have a simple enough map on Google Maps V3.

I change the icon image on mouse over listener event, I change it back on mouse out simple enough.

I change the icon again when I click the marker, but, I want to keep that icon while the marker is selected. When I mouse out, the marker icon changes again because I told it to do so in the mouse out listener event.

I need to exclude the selected marker from the mouseout listener event but I can't figure out how to find the marker I have currently selected. Any ideas?

Here is my code

            google.maps.event.addListener(marker, 'mouseover', function () {
                this.setIcon("images/star-3-white.png");

            });
            google.maps.event.addListener(marker, 'mouseout', function () {
                    //  this overwrites the image again, 
                    //  need to exclude the current one here
                    this.setIcon("images/star-3.png");
            });

            google.maps.event.addListener(marker, 'click', function () {
                this.setIcon("images/star-3-white.png");
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });

Upvotes: 5

Views: 12897

Answers (3)

Zeno Popovici
Zeno Popovici

Reputation: 589

Stumbled on this answer when searching for something else. This will do.

var currentMarker = null;
var markerIcon = 'some.svg';
var markerIconHover = 'some-other.svg';

// Initialize marker here
[...]

// Set current marker on click
google.maps.event.addListener(marker, 'click', function() {
    // Reset market icons
    clearMarkerIcons();  
    // Set hovered map marker
    marker.setIcon(markerIconHover);
    // Set current marker
    currentMarker = marker;
    // Open infoWindow here
    [...]
});

// Set correct icon on mouseover
google.maps.event.addListener(marker, 'mouseover', function() {
    marker.setIcon(markerIconHover);
});

// Set correct icon on mouseout
google.maps.event.addListener(marker, 'mouseout', function() {
    if (currentMarker !== marker) {
        marker.setIcon(markerIcon);
    }
});

// Clear all set marker icons
function clearMarkerIcons() {
    for (var i = 0; i < map.markers.length; i++) {
        map.markers[i].setIcon(markerIcon);
    }
}

Upvotes: 2

jezorama
jezorama

Reputation: 357

A bit long winded but I just added a variable to store the current marker title which I know is unique. I then check to see if it is that one that I am selecting. Also, I make sure to reset all the markers so it doesnt stay the same color as a selected one:

    var clickedMarkerTitle = null;
    function addMarker(latLng, _title, contentString) {
        marker = new google.maps.Marker({
            map: map,
            position: latLng,
            icon: "images/star-3.png",
            title: _title,
            html: contentString
        });

        google.maps.event.addListener(marker, 'mouseover', function () {
            this.setIcon("images/star-3-white.png");

        });
        google.maps.event.addListener(marker, 'mouseout', function () {
            //this.setIcon("images/star-3.png");
            testIcon(this);
        });

        google.maps.event.addListener(marker, 'click', function () {
            resetMarkerIcons();
            saveIconState(this);
            this.setIcon("images/star-3-white.png");
            infowindow.setContent(this.html);
            infowindow.open(map, this);

        });

        markersArray.push(marker);

    }
    function resetMarkerIcons() {
        //  reset all the icons back to normal except the one you clicked
        for (var i = 0; i < markersArray.length; i++) {
            markersArray[i].setIcon("images/star-3.png");

        }

    }
    function saveIconState(marker) {
        clickedMarkerTitle = marker.title;
    }
    function testIcon(marker) {
        $('#test').html('<span>' + marker.title + '</span>');

        if (clickedMarkerTitle != null) {
            $('#test').html('<span>' + marker.title + ' and its not null</span>');
            if (marker.title != clickedMarkerTitle) {
                $('#test').html('<span>' + marker.title + ' and ' + clickedMarkerTitle + '</span>');
                marker.setIcon("images/star-3.png");
            }
        }
        else {
            marker.setIcon("images/star-3.png");
        }
    }

Upvotes: 4

geocodezip
geocodezip

Reputation: 161384

Either

  1. create a member of the marker .selected and set that when you click on it, then test it in the mouseout function (and the mouseover function if you want to be complete), don't change the icon if it is set.
  2. create a global variable (assuming there is only one marker selected at a time), set that equal to the marker that was clicked. In the mouseout (and mouseover) check if it is equal to the current marker (this), if it is don't change the icon.

Upvotes: 4

Related Questions