클릭시 어떻게 Google지도 아이콘을 다시 그릴 수 있습니까?

Question

지도 마커 세트가있는 Google지도가 있습니다. 필자는 기본 이미지 대신 pinSymbol()이라는 함수를 사용하여지도 표시자를 그리기로했습니다.

클릭 할 때 핀의 색상을 변경하고 싶지만 업데이트 할 수 없습니다. 아이콘의 속성을 변경할 수있는 현재 코드에서는 console.log (마커)로 볼 수 있지만 맵의 색상은 업데이트되지 않습니다.

질문 : 어떻게하면 아이콘을 다시 그릴 수 있습니까?

이것은 내 코드입니다.

// 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 기능을

// 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

을 마커의 더 (문서화) .icon 속성이 없다 : 나는 붙어 곳

// 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; 

이입니다. 사용하지 마십시오.

// 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

코드 :

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>

문서화 된 .setIcon 방법을 사용