CODEWITHSUNDEEP
javascriptjqueryjquery-uigoogle-mapsgoogle-maps-api-3
Oleg Rogov
Oleg Rogov

Reputation: 720

Different marker color jquery

I have a jQuery range slider in my demo — http://jsfiddle.net/dLWNc/35/

$( ".slider-range" ).slider({
      range: true,
      min: stations.min_value,
      step: stations.step_value,
      max: stations.max_value,
      values: [stations.min_range, stations.max_range],
      slide: function( event, ui ) {
        $("#min").val(ui.values[ 0 ]);
        $("#max").val(ui.values[ 1 ]);
      }
    });

How i filter and set new icon markers dynamically the map look like this:

enter image description here

Upvotes: 0

Views: 275

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

iterate over all markers and use setIcon() to set the url of the marker to an image based on the value.

Example:

  $.each(station,function(i,v){

    var icon=((v.value < ui.values[0])
                ? 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
                : ((v.value > ui.values[1])
                     ? 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
                     : 'http://www.google.com/mapfiles/marker.png'
               ));
    StationMarkers[i].setIcon(icon);
  });

Upvotes: 2

Related Questions