Googleマップでマーカー画像を変更する方法

Question

地図から20マーカーを表示していますが、1つのアイコンで10個のマーカーを表示し、他のアイコンで10個のマーカーを表示する必要があります。 マーカーmyLatLng〜myLatLng9には同様のマーカーとマーカーが必要です。myLatLngbとmyLatLngb9には同じマーカーが必要です。 https://jsfiddle.net/9yq8y1p2/4/ コード

<script> 

    function initMap() { 
     var labels = ''; 
     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

-

JSフィドルB.としてmyLatLngb9にAとmyLatLngbなどmyLatLng9にmyLatLng - uが私は2つのマーカーともラベル マーカーを区別することができるように変更するにはどのような私を助けることができますaddMarker関数を修正し、アイコンパスに引数を渡します。それが役に立てば幸い！

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