title: Dynamically Change Color of GoogleMap Icon/Marker
body: <p>I am trying to change the color of a marker/icon with GoogleMaps API V3 based on user input. I can hard code the color or image link I want into the Javascript, but if I try to pass the color or link as a string variable from my Java program then it either does not show up or defaults to a red marker. </p>
  
  <p>I've looked at all the following threads and at the google API:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker?lq=1">Google Maps API 3 - Custom marker color for default (dot) marker</a></li>
  <li><a href="https://stackoverflow.com/questions/16206195/how-do-i-change-icon-colour-in-google-maps-api-v3?lq=1">How do I change icon colour in Google Maps API V3?</a></li>
  <li><a href="https://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker/7686977#7686977">Google Maps API 3 - Custom marker color for default (dot) marker</a></li>
  <li><a href="https://developers.google.com/maps/documentation/javascript/markers" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/markers</a></li>
  </ul>
  
  <p>All of which have either the link to the marker icon they want to use or the color HEX code already hard coded into the javascript.</p>
  
  <p>My attempt, where address1 and color1 are both strings that are passed to the javascript from my Java code. color1's string, for example could be </p>
  
  <p>"<a href="http://chart.apis.google.com/chart?chst=d_map_pin_letter&amp;chld" rel="nofollow noreferrer">http://chart.apis.google.com/chart?chst=d_map_pin_letter&amp;chld</a>•|4D8080":</p>
  
  <pre><code>function codeAddress(address1, color1){
  var pinColor = color1;
  address=address1;
  document.geocoder.geocode( {'address': address1}, function(results, status) {
    app.callFromJavascript(address1);
        if (status == google.maps.GeocoderStatus.OK) {
          document.map.setCenter(results[0].geometry.location);
          document.map.setZoom(13);
          var marker = new google.maps.Marker({
              icon:  pinColor,
              position: results[0].geometry.location,
              map: document.map
                  });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
  }
  </code></pre>
  
  <p>This results in the map centering on the location and showing the default red marker. 
  If I change the string passed to color1 to be "<a href="http://maps.google.com/mapfiles/ms/icons/yellow-dot.png" rel="nofollow noreferrer">http://maps.google.com/mapfiles/ms/icons/yellow-dot.png</a>"  then no marker shows up at all.</p>
  
  <p>What am I missing that I can't get these to generate from passed variables? Is it simply not possible and mandatory that the location markers be hard coded?</p>