Search code examples
javascriptgoogle-mapsmarker

how to show the latest marker in different color in google maps


i have some markers , in that i need to show the latest marker in a different color or image so that it can be easily identify the current location. all the markers should be one colur and latest one should be in different color.

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());
        }
    }

Solution

  • Change this:

    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());
            }
    

    To:

    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"
        });
    }