最新のマーカーをGoogleマップで別の色で表示する方法

Question

最新のマーカーを別の色や画像で表示する必要があるため、現在の場所を簡単に識別できるようにマーカーがいくつかあります。 すべてのマーカーは1つの色であり、最新のマーカーは異なる色である必要があります。

function initMap() { 
     var labelIndex = 0; 
     var lstLatLng = []; 
     @if (Model.AssetTrackers[0].latitude.Count > 0) 
     { 
      for (int i = 0; i < Model.AssetTrackers[0].latitude.Count; i++) 
      { 
       @: lstLatLng.push({ lat: @Model.AssetTrackers[0].latitude[i],lng: @Model.AssetTrackers[0].longitude[i],deviceId: '@Model.AssetTrackers[0].deviceid', time: '@Model.AssetTrackers[0].time[i]' }) 
      } 
     } 
     else 
     { 

     } 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 14, 
      center: { lat: 22.791761, lng: 86.177719 }, 
     }); 
     var image = "~/images/pickup.png"; 
     var drawingManager = new google.maps.drawing.DrawingManager({ 
      drawingControl: true, 
      drawingControlOptions: { 
       position: google.maps.ControlPosition.TOP_CENTER, 
       drawingModes: ['polyline'] 
      }, 
      markerOptions: { icon: '~/images/pickup.png' }, 
     }); 
     drawingManager.setMap(map); 
     var pathBetween = new google.maps.Polyline({ 
      path: lstLatLng, 
      strokeColor: '#00B3FD', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 
     pathBetween.setMap(map); 
     var polylines = []; 
     var deviceIds = []; 
     function addMarker(markerSettings, label) { 
       var marker = new google.maps.Marker({ 
        position: markerSettings, 
        map: map, 
        title: markerSettings.time, 
        icon: "~/images/location.png" 
       }); 
     } 
     for (var i = 0; i < lstLatLng.length; i++) { 
      addMarker(lstLatLng[i], (i+1).toString()); 
     } 
    } 

Answer 1

変更この：言っ

for (var i = 0; i < lstLatLng.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: lstLatLng[i], 
     map: map, 
     title: markerSettings.time, 
     icon: i === lstLatLng.length-1 : "~/images/differentColour.png" ? "~/images/location.png" 
    }); 
} 

Answer 2

function initMap() { 
       var labelIndex = 0; 
       var lstLatLng = []; 
       @if (Model.AssetTrackers[0].latitude.Count > 0) 
       { 
        for (int i = 0; i < Model.AssetTrackers[0].latitude.Count; i++) 
        { 
         @: lstLatLng.push({ lat: @Model.AssetTrackers[0].latitude[i],lng: @Model.AssetTrackers[0].longitude[i],deviceId: '@Model.AssetTrackers[0].deviceid', time: '@Model.AssetTrackers[0].time[i]' }) 
        } 
       } 
       else 
       { 

       } 
       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 14, 
        center: { lat: 26.791761, lng: 89.177719 }, 
       }); 
       var image = "http://xyz/images/pickup.png"; 
       var drawingManager = new google.maps.drawing.DrawingManager({ 
        drawingControl: true, 
        drawingControlOptions: { 
         position: google.maps.ControlPosition.TOP_CENTER, 
         drawingModes: ['polyline'] 
        }, 
        markerOptions: { icon: 'http://xyz/images/pickup.png' }, 
       }); 
       drawingManager.setMap(map); 
       var pathBetween = new google.maps.Polyline({ 
        path: lstLatLng, 
        strokeColor: '#00B3FD', 
        strokeOpacity: 1.0, 
        strokeWeight: 2 
       }); 
       pathBetween.setMap(map); 
       var polylines = []; 
       var deviceIds = []; 
       function addMarker(markerSettings, label) { 
         var marker = new google.maps.Marker({ 
          position: markerSettings, 
          map: map, 
          title: markerSettings.time, 
          icon: "http://jusco.kernelsphere.com/images/location.png" 
        }); 
         if (i === lstLatLng.length - 1) { 
          var marker = new google.maps.Marker({ 
           position: markerSettings, 
           map: map, 
           title:'hello', 
          }); 
         } 
       } 
       for (var i = 0; i < lstLatLng.length; i++) { 
        addMarker(lstLatLng[i], (i + 1).toString()); 
       } 
       alert(lstLatLng.length); 
       alert(i); 
      }