Comment redessiner un marqueur Google Maps sur un clic?

Question

J'ai une carte Google avec un ensemble de marqueurs de carte. J'ai choisi de dessiner les marqueurs de carte avec une fonction appelée pinSymbol() - au lieu d'utiliser l'image par défaut.

Je veux changer la couleur de la broche quand on clique dessus, mais je n'arrive pas à la mettre à jour. Avec le code actuel, je peux changer la propriété de l'icône, je peux le voir avec console.log (marqueur), mais il ne mettra pas à jour la couleur sur la carte.

Question: Comment redessiner l'icône lors d'un clic?

Ceci est mon code.

// Go through all restaurants and get facebook info, 
// then create a marker for each one. 

    restaurants.forEach(function(restaurant){ 
    getFacebookInfo(restaurant); 
    }); // end forEach loop 

// Get data from Facebook Graph API and create a marker 
    function getFacebookInfo(restaurant){ 
    $.ajax({ 
     url : '/restaurants/' + restaurant.id, 
     type : 'GET', 
     dataType:'json', 
     success : function(data) { 
      restaurant.about = data.about; 
      createMarker(restaurant); 
     }, 
     error : function(request, error) { 
     console.log(error); 
     alert("We're having some trouble getting a restaurant's info from Facebook. " + 
     "Please check your internet connection and try refreshing the page.") 
     } 
    }); 
    } 

// Create a marker on the map for a location 
    function createMarker(restaurant){ 
    var position = restaurant.location; 
    var infowindow = new google.maps.InfoWindow({ 
    maxWidth: 200 
    }); 

    restaurant.marker = new google.maps.Marker({ 
    position: position, 
    map: map, 
    icon: pinSymbol('#CD212A', '#CD212A'), 
    name: restaurant.name, 
    id: restaurant.id, 
    about: restaurant.about, 
    animation: google.maps.Animation.DROP 
    }); 

    // Push the marker to array of markers 
    markers.push(restaurant.marker); 

    // Call populateInfoWindow function 
    populateInfoWindow(restaurant.marker, infowindow); 

    // Add infowindow as a property to restaurant 
    // this makes it available for use outside this function. 
    restaurant.infowindow = infowindow; 

C'est là que je suis coincé:

// Open infowindow when marker is clicked and change color 
    restaurant.marker.addListener('click', function(){ 
    this.icon = pinSymbol('#EED4D9', '#EED4D9'); 
    console.log(restaurant.marker); 
    infowindow.open(map, this); 
    }); 
} 

pinSymbol Fonction

// Create pin for google map marker 
    function pinSymbol(color, strokeColor) { 
    return { 
     path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 
     fillColor: color, 
     fillOpacity: 1, 
     strokeColor: strokeColor, 
     strokeWeight: 1, 
     scale: 1, 
     labelOrigin: new google.maps.Point(0,-29) 
    }; 
    } 

Answer 1

Il n'y a pas (documenté) propriété .icon d'un marqueur. Ne l'utilisez pas. Utilisez la méthode .setIcon documentée:

// Open infowindow when marker is clicked and change color 
restaurant.marker.addListener('click', function() { 
    this.setIcon(pinSymbol('#EED4D9', '#EED4D9')); 
    console.log(restaurant.marker); 
    infowindow.open(map, this); 
}); 

proof of concept fiddle

extrait de code:

var geocoder; 
 
var map; 
 
var markers = []; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    createMarker({ 
 
    name: "center", 
 
    id: 2, 
 
    about: "", 
 
    location: { 
 
     lat: 37.4419, 
 
     lng: -122.1419 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
// Create a marker on the map for a location 
 
function createMarker(restaurant) { 
 
    var position = restaurant.location; 
 
    var infowindow = new google.maps.InfoWindow({ 
 
    maxWidth: 200 
 
    }); 
 

 
    restaurant.marker = new google.maps.Marker({ 
 
    position: position, 
 
    map: map, 
 
    icon: pinSymbol('#CD212A', '#CD212A'), 
 
    name: restaurant.name, 
 
    id: restaurant.id, 
 
    about: restaurant.about, 
 
    animation: google.maps.Animation.DROP 
 
    }); 
 

 
    // Push the marker to array of markers 
 
    markers.push(restaurant.marker); 
 

 
    // Call populateInfoWindow function 
 
    populateInfoWindow(restaurant.marker, infowindow); 
 

 
    // Add infowindow as a property to restaurant 
 
    // this makes it available for use outside this function. 
 
    restaurant.infowindow = infowindow; 
 

 
    // Open infowindow when marker is clicked and change color 
 
    restaurant.marker.addListener('click', function() { 
 
    if (this.getIcon().fillColor != "#EED4D9") { 
 
     this.setIcon(pinSymbol('#EED4D9', '#EED4D9')); 
 
    } else { 
 
     this.setIcon(pinSymbol('#CD212A', '#CD212A')); 
 
    } 
 
    console.log(restaurant.marker); 
 
    infowindow.open(map, this); 
 
    }); 
 
} 
 

 
// Create pin for google map marker 
 
function pinSymbol(color, strokeColor) { 
 
    return { 
 
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 
 
    fillColor: color, 
 
    fillOpacity: 1, 
 
    strokeColor: strokeColor, 
 
    strokeWeight: 1, 
 
    scale: 1, 
 
    labelOrigin: new google.maps.Point(0, -29) 
 
    }; 
 
} 
 

 
function populateInfoWindow(marker, infowindow) { 
 
    infowindow.setContent("content"); 
 
};

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>