google maps different color marker not working

Question

in my project i use google geometry location API to display marker on maps using site name not latitude and longitude. it is working fine. now, i want to display different marker for different site base on my database field resp. if resp is greater than 50 then marker is red and if less then 50 then marker is green. i tried it as below code. but it display all green or all red. if first value of resp is below 50 then all markers are green and if first value is greater than 50 then all markers are red. how can i display marker dynamically as value of resp? please help me. my code is

<script>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(39.639537564366684, -97.03125),
    mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);

var addresses = [<?php $numItems = count($val); $i=0; foreach($val as $data){ echo "['".$data['name']."','".$data['resp']."']"; if(++$i !== $numItems) {echo ",";}}?>];
//var colordot =[];
//alert(addresses);
for (var x = 0; x < addresses.length; x++) {
//alert(addresses[x][1]);

if (addresses[x][1] >= 50) {

                 var img= 'img/red-dot.png';
            }
            else{
                var img= 'img/green-dot.png';
            }
            //alert(colordot[x]);
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x][0]+'&sensor=false', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({

                icon: img,

            position: latlng,
            map: map
        });

    });
}

});
</script>

Answer 1

One way to solve the problem would be with function closure on the img variable in the geocoder call:

$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x][0] + '&sensor=false', null, function(img) {
  return function(data) {
    var p = data.results[0].geometry.location
    var latlng = new google.maps.LatLng(p.lat, p.lng);
    new google.maps.Marker({
     icon: img,
     position: latlng,
      map: map
    });

  }
}(img));

proof of concept fiddle

code snippet:

$(document).ready(function() {
  var map;
  var elevator;
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(39.639537564366684, -97.03125),
    mapTypeId: 'terrain'
  };
  map = new google.maps.Map($('#map')[0], myOptions);

  var addresses = [
    ["New York, NY", 1],
    ["Boston, MA", 75]
  ];
  for (var x = 0; x < addresses.length; x++) {
    if (addresses[x][1] >= 50) {
      var img = 'http://maps.google.com/mapfiles/ms/micons/red.png';
    } else {
      var img = 'http://maps.google.com/mapfiles/ms/micons/green.png';
    }
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x][0] + '&sensor=false', null, function(img) {
      return function(data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
          icon: img,
          position: latlng,
          map: map
        });
      }
    }(img)).fail(function(jqxhr, textStatus, error) {
      var err = textStatus + ", " + error;
      console.log("Request Failed: " + err);
    });;
  }
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="map"></div>