Google map api multiple marker change color if selected

Question

So I have a multiple marker, by default it's all color green and I want to turn the specific marker to color blue once click and revert back to color green if unselected. can anyone has an idea to to do this?

below is my code

marker.addListener('click', function(marker, i) {
                return function() {
                    this.setIcon("http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
                }
            }(marker, j))

possible duplicate of [Change Google Maps marker icon when clicking on other](https://stackoverflow.com/questions/27754101/change-google-maps-marker-icon-when-clicking-on-other) — geocodezip, Mar 28 '20 at 18:37
possible duplicate of [Google Maps API — Unique Active Icon per marker on click](https://stackoverflow.com/questions/12831358/google-maps-api-unique-active-icon-per-marker-on-click) — geocodezip, Mar 28 '20 at 18:41

score -2 · Accepted Answer · edited Mar 28 '20 at 17:27

Here is working jsfiddle. Maybe it can help you.

http://jsfiddle.net/s8vgxp3g/1/

var locations = [
    [
        "New Mermaid",
    36.9079, -76.199,
    1,
        "Georgia Mason",
        "",
        "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
        "coming soon"],
    [
        "1950 Fish Dish",
    36.87224, -76.29518,
    2,
        "Terry Cox-Joseph",
        "Rowena's",
        "758 W. 22nd Street in front of Rowena's",
        "found"],
    [
        "A Rising Community",
    36.95298, -76.25158,
    3,
        "Steven F. Morris",
        "Judy Boone Realty",
        "Norfolk City Library - Pretlow Branch, 9640 Granby St.",
        "found"],
    [
        "A School Of Fish",
    36.88909, -76.26055,
    4,
        "Steven F. Morris",
        "Sandfiddler Pawn Shop",
        "5429 Tidewater Dr.",
        "found"],
    [
        "Aubrica the Mermaid (nee: Aubry Alexis)",
    36.8618, -76.203,
    5,
        "Myke Irving/ Georgia Mason",
        "USAVE Auto Rental",
        "Virginia Auto Rental on Virginia Beach Blvd",
        "found"]
];
var markers = [];
var map;

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        // center: new google.maps.LatLng(-33.92, 151.25),
        center: new google.maps.LatLng(36.8857, -76.2599),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();
    var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/';
    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: iconBase + 'Stock%20Index%20Up.png'
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0], locations[i][6]);
                infowindow.open(map, marker);
                for (var j = 0; j < markers.length; j++) {
                    markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
                }
                marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
            };
        })(marker, i));
        markers.push(marker);

    }
}
google.maps.event.addDomListener(window, 'load', initialize);

<script src="http://maps.google.com/maps/api/js"></script>
<div>
    <div id="map" style="width: 500px; height: 400px;"></div>
</div>

Google map api multiple marker change color if selected

1 Answers1