Google지도의 마커 변경 자바 스크립트

Question

자바 스크립트의 google maps API를 2 번에 추가했습니다. API에서 가져온 위치에 따라 맞춤 마커가지도에 추가되었습니다. UI의 위치 목록을 표시했습니다. 위치를 클릭 한 후에 해당 위치의 마커 아이콘을 바꾸고 다른 모든 아이콘을 재설정하고 싶습니다. 다음 코드가 예상대로 작동하지 않습니다.

placeMarkers(markers: any, infoWindowContent: any) { 
    // Display multiple markers on a map 
    let infoWindow = new google.maps.InfoWindow(); 
    let bounds = new google.maps.LatLngBounds(); 
    let marker; 

    // Loop through our array of markers & place each one on the map 
    for(let i = 0; i < markers.length; i++) { 
     let position = new google.maps.LatLng(<number>markers[i].lat, <number>markers[i].lang); 
     bounds.extend(position); 
     marker = new google.maps.Marker(<google.maps.MarkerOptions>{ 
     position, 
     map: this.map, 
     title: markers[i].name, 
     icon: this.iconUrl, 
     }); 

     // Allow each marker to have an info window 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infoWindow.setContent(infoWindowContent[i]); 
      infoWindow.open(this.map, marker); 
     } 
     })(marker, i)); 

     // Automatically center the map fitting all markers on the screen 
     this.map.fitBounds(bounds); 
    } 
    } 

그리고 선택한 위치에 마커를 대체 할이 코드 :

나는지도에 마커를 배치하려면이 기능을 추가 한 코드 위

selectSite(site: any, index: any) { 
    this.placeMarkers(this.finalMarkers, this.finalInfoWindowContent); 

    let selection = this.finalMarkers.find(function(item) { 
      return item.name == site.Name 
    }); 

    let infowindow = new google.maps.InfoWindow(); 
    let position = new google.maps.LatLng(<number>selection.lat, <number>selection.lang); 

    let redMarker = new google.maps.Marker(<google.maps.MarkerOptions>{ 
     position: position, 
     map: this.map, 
     title: selection.name, 
     icon: {url: require('../../../assets/img/red-marker.png'), scaledSize: {height: 30, width: 20}} 
    }); 
     redMarker.addListener('click', function() { 
     infowindow.setContent(selection.name); 
     infowindow.open(this.map, redMarker); 
    }); 
    } 

처음에 잘 작동한다, 그러나 후에 붙어있어 여러 위치가 변경됩니다. 도움이 되었으면 대단히 감사합니다!

Answer 1

**You can Set Following marker** 

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
     var icons = { 
      parking: { 
      icon: iconBase + 'parking_lot_maps.png' 
      }, 
      library: { 
      icon: iconBase + 'library_maps.png' 
      }, 
      info: { 
      icon: iconBase + 'info-i_maps.png' 
      } 
     };