Search code examples
google-mapsgoogle-maps-api-3

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);
            });

Solution

  • 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");
            }
        }