how to change marker image in a google map

Question

i'm showing 20 markers in the map from that i need to show 10 markers with one icon and other 10 markers want to show in other icon. markers myLatLng to myLatLng9 should have similar marker and markers myLatLngb to myLatLngb9 should have same marker. can u help me what to change so that i can differentiate the 2 markers and label also markers - myLatLng to myLatLng9 as A and myLatLngb to myLatLngb9 as B.

js fiddle - https://jsfiddle.net/9yq8y1p2/4/ code

 <script>

    function initMap() {
        var labels = '0123456789';
        var labelIndex = 0;


                   // @Model.AssetTrackers[0].deviceid
                   @: var myLatLng =  { lat: @Model.AssetTrackers[0].latitude[0],lng: @Model.AssetTrackers[0].longitude[0],deviceId:'@Model.AssetTrackers[0].deviceid'};
                  //.......
                   @: var myLatLng9 = { lat: @Model.AssetTrackers[0].latitude[9],lng: @Model.AssetTrackers[0].longitude[9],deviceId: '@Model.AssetTrackers[0].deviceid' };
                   //tracker 2
                     @: var myLatLngb =  { lat: @Model.AssetTrackers[1].latitude[0],lng: @Model.AssetTrackers[1].longitude[0],deviceId:'@Model.AssetTrackers[1].deviceid'};
                  //......
                   @: var myLatLngb9 = { lat: @Model.AssetTrackers[1].latitude[9],lng: @Model.AssetTrackers[1].longitude[9],deviceId: '@Model.AssetTrackers[1].deviceid' };


    var citymap = {
        abc: {
            center: { lat: 17.446507, lng: 78.383033 },

        }
    };

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 18,
        center: myLatLng,
    });



    var image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";

    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['polyline']
        },
        markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });
    drawingManager.setMap(map);

       var pathBetween = new google.maps.Polyline({
        path: [myLatLng,myLatLng1,myLatLng2,myLatLng3,myLatLng4,myLatLng5,myLatLng6,myLatLng7,myLatLng8,myLatLng9],
        strokeColor: '#8D6E63',

        strokeOpacity: 1.0,
        strokeWeight: 2
        });
       // second tracker path
        var pathbetweenb = new google.maps.Polyline({
            path: [myLatLngb, myLatLngb1, myLatLngb2, myLatLngb3, myLatLngb4, myLatLngb5, myLatLngb6, myLatLngb7, myLatLngb8, myLatLngb9],
            strokecolor: '#8D6E63',
            strokeopacity: 1.0,
            strokeweight: 2
        });


        pathBetween.setMap(map);
        pathbetweenb.setMap(map);


    var path = JSON.parse('[@(Html.Raw(ViewBag.PolyLine))]');

    var pathBetween1 = new google.maps.Polyline({
        path: path,
        strokeColor: '#3C8DBC',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    pathBetween1.setMap(map);

    var polylines = [];
    google.maps.event.addListener(drawingManager, 'polylinecomplete', function(polyline) {
        polylines.push(polyline);
        var polylinePath = polyline.getPath();
        console.log(polylinePath.getArray().toString());
        var polyarray = [];
        for (var i = 0; i < polylinePath.getArray().length; i++) {
            polyarray.push('{"lat":'+polylinePath.getArray()[i].lat() + ', "lng":' + polylinePath.getArray()[i].lng() + '}');
        }

        drawingManager.setDrawingMode(null);
    });
        var deviceIds = [];
    function addMarker(markerSettings) {
        if (!insidePolygon(markerSettings)) {

            deviceIds.push(markerSettings.deviceId);
            var deviceId = $.grep(deviceIds, function( a ) {
                return a === markerSettings.deviceId;
            })
            if(deviceId.length == 1){

                });
            }
            var marker = new google.maps.Marker({
                position: markerSettings,
                map: map,
                title: '@Model.AssetTrackers[0].deviceid',
                label:"A"+ labels[labelIndex++ % labels.length],
                icon : "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
            });
        }
        else{
            var marker = new google.maps.Marker({
                position: markerSettings,
                map: map,
                title: '@Model.AssetTrackers[0].deviceid',
                label:"A"+ labels[labelIndex++ % labels.length]
            });
        }

    }

    addMarker(myLatLng);
    addMarker(myLatLng1);
    addMarker(myLatLng2);
    addMarker(myLatLng3);
    addMarker(myLatLng4);
    addMarker(myLatLng5);
    addMarker(myLatLng6);
    addMarker(myLatLng7);
    addMarker(myLatLng8);
    addMarker(myLatLng9);

        //second 
        addMarker(myLatLngb);
        addMarker(myLatLngb1);
        addMarker(myLatLngb2);
        addMarker(myLatLngb3);
        addMarker(myLatLngb4);
        addMarker(myLatLngb5);
        addMarker(myLatLngb6);
        addMarker(myLatLngb7);
        addMarker(myLatLngb8);
       addMarker(myLatLngb9);
   }
    </script>

Answer 1

Modify your addMarker function and pass icon path an argument. Hope it helps!

  function addMarker(markerSettings,iconImg) 
        {
        var marker = new google.maps.Marker({
                        position: markerSettings,
                        map: map,
                        title: '@Model.AssetTrackers[0].deviceid',
                        label: "A" + labels[labelIndex++ % labels.length],
                       //Pass IconImg here
                        icon: iconImg
                    });
        }


        var icon1='http://maps.google.com/mapfiles/ms/icons/green.png';
        var icon2='http://maps.google.com/mapfiles/ms/icons/blue.png';

            addMarker(myLatLng,icon1);
            addMarker(myLatLng1,icon1);
            addMarker(myLatLng2,icon1);
            addMarker(myLatLng3,icon1);
            addMarker(myLatLng4,icon1);
            addMarker(myLatLng5,icon1);
            addMarker(myLatLng6,icon1);
            addMarker(myLatLng7,icon1);
            addMarker(myLatLng8,icon1);
            addMarker(myLatLng9,icon1);
            //second tracker
            addMarker(myLatLngb,icon2);
            addMarker(myLatLngb1,icon2);
            addMarker(myLatLngb2,icon2);
            addMarker(myLatLngb3,icon2);
            addMarker(myLatLngb4,icon2);
            addMarker(myLatLngb5,icon2);
            addMarker(myLatLngb6,icon2);
            addMarker(myLatLngb7,icon2);
            addMarker(myLatLngb8,icon2);
            addMarker(myLatLngb9,icon2);