更改Google标记的icon_image

Question

I want to change the marker image in a particular scenario. When we click on one of the marker of the map having multiple marker, on click it will opens a pop-up, pop-up contains 2-3 fields and submit button. When we click that submit button after that i wants to change marker image. Please let me know how to do that. I have tried from below link but it change image before we submit button of popup.

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

http://jsfiddle.net/gargiguy/s8vgxp3g/

Answer 1

To change the marker after the button click, add a function that runs on the click of the button. Pass that function a reference to the marker and use that to change the icon.

One option: create an array of markers (ie gmarkers ), push the markers on to that array, then use the array index of the marker to change its icon:

window.submitFunction = function(i) {
    gmarkers[i].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
}

proof of concept fiddle

code snippet:

 var gmarkers = []; function initMap() { var 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++) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: iconBase + 'Stock%20Index%20Up.png' }); gmarkers.push(marker); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { console.log(locations[i][0] + "<br>" + locations[i][6] + "<br><input id='btn' value='submit' type='button' onclick='submitFunction(" + (gmarkers.length - 1) + ");/>"); infowindow.setContent(locations[i][0] + "<br>" + locations[i][6] + "<br><input id='btn' value='submit' type='button' onclick='submitFunction(" + i + ");'/>"); infowindow.open(map, marker); } })(marker, i)); } } window.submitFunction = function(i) { gmarkers[i].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); } google.maps.event.addDomListener(window, 'load', initMap); 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" ] ]; 

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