Question

I am creating two different icons for a google map.
however only one icon appears.
a drop down select called facility will allow one icon based on a value of ‘8’, all other values create the other icon.

var marker = createMarker(latlng, name, address, city, state, zipcode, telephone, images, url, facility);


function createMarker(latlng, name, address, city, state, zipcode, telephone, images, url, facility) { 
  var html = "<div id='infodiv'>" + name + "<br/><h4>" + address + "<br/>" + city + ", " + state + " " + zipcode + "<br/>" + (formatPhone(telephone)) + "</h4><div class='infoimage'><img src='" + images + "'></div><div class='footer'><a href='http://" + url + "'>" + url + "</a></div></div>";
  var marker = new google.maps.Marker({
    icon: icon2,
    icon: (facility == 8) ? icon : icon, 
    map: map, 
    position: latlng 
  });

here are the icons:

var icon = new google.maps.MarkerImage("./images/plum_flag.png", 
new google.maps.Size(35, 52), new google.maps.Point(0, 0), 
new google.maps.Point(0, 52));
//callup the orange icon
var icon2 = new google.maps.MarkerImage("./images/orange_flag.png", 
new google.maps.Size(26, 39), new google.maps.Point(0, 0), 
new google.maps.Point(0, 39));

The only icon showing up is the ‘var icon = new google.maps.MarkerImage(“./images/plum_flag.png”,’ no matter what the select option is….

Answer 1

(facility == 8) ? icon : icon,

means: if facility is 8, use icon, otherwise use icon. Not very useful because it always uses icon.

Instead you might want:

(facility == 8) ? icon : icon2,

You might be confused that icon refers to the previous icon: icon2 as you set. However, both icons refer to the exact same thing so you won’t see any difference.

Since you are defining icon with the ternary operator, the first icon: definiton can also be omitted (the second icon: definition is overwriting it anyway).