change icon_image von google marker

Question

Ich möchte das Markerbild in einem bestimmten Szenario ändern. Wenn wir auf einen der Marker der Karte mit mehreren Markern klicken, öffnet sich ein Pop-Up, ein Pop-up enthält 2-3 Felder und die Schaltfläche zum Absenden. Wenn wir danach auf die Senden-Schaltfläche klicken, möchte ich das Marker-Bild ändern. Bitte lassen Sie mich wissen, wie das geht. Ich habe versucht, von unten Link, aber es Bild ändern, bevor wir Button Popup senden.

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

Um die Markierung nach dem Button-Klick zu ändern, fügen Sie eine Funktion, die auf dem Klick auf die Schaltfläche ausgeführt wird. Übergeben Sie dieser Funktion einen Verweis auf die Markierung und verwenden Sie diese, um das Symbol zu ändern.

Eine Option: eine Reihe von Markierungen (dh gmarkers) erstellen, drücken Sie die Markierungen auf dem Array verwenden, dann den Array-Index des Markers sein Symbol zu ändern:

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

proof of concept fiddle

Code-Schnipsel:

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>