title: Set google maps marker icon properties in javascript
body: <p>I am trying to 'style' the markers from data from an xml using javascript:</p>
  
  <pre><code>        var title = 'Speed: '+$(this).find('Speed').text();
          var lat = $(this).find('lat').text();
          var lng = $(this).find('lng').text();
  
  
          var markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
          bounds.extend(markerCoords);
          var marker = new google.maps.Marker({
              position: markerCoords,
              title: title,
              icon: {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight: 2,
                  fillColor: '#009933',
                  fillOpacity: 1,
                  rotation: 0,
                  anchor: new google.maps.Point(0,2)
        },
  </code></pre>
  
  <p>So far this works great. I can't seem to do the same with the options within icon. The following is me trying to put the rotation number in the same way which doesn't display the marker at all:</p>
  
  <pre><code>            var marker = new google.maps.Marker({
              position: markerCoords,
              title: title,
              icon: {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight: 2,
                  fillColor: '#009933',
                  fillOpacity: 1,
                  rotation: $(this).find('rotation').text(),
                  anchor: new google.maps.Point(0,2)
        },
  </code></pre>
  
  <p>And neither does it when I try to add it as a variable before hand:</p>
  
  <pre><code>        var title = 'Speed: '+$(this).find('Speed').text();
          var lat = $(this).find('lat').text();
          var lng = $(this).find('lng').text();
          var rotation = $(this).find('rotation').text();
  
          var markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
          bounds.extend(markerCoords);
          var marker = new google.maps.Marker({
              position: markerCoords,
              title: title,
              icon: {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight: 2,
                  fillColor: '#009933',
                  fillOpacity: 1,
                  rotation: rotation,
                  anchor: new google.maps.Point(0,2)
        },
  </code></pre>
  
  <p>The only thing I can think is that the whole icon needs to go in as one long string but I can't figure out how to get this done.</p>
  
  <p>For clarity the data itself is coming from an xml file:</p>
  
  <pre><code>&lt;markers&gt;
   &lt;marker&gt;
    &lt;lat&gt;50.11966&lt;/lat&gt;
    &lt;lng&gt;-5.54409&lt;/lng&gt;
    &lt;Speed&gt;0&lt;/Speed&gt;
    &lt;rotation&gt;0&lt;/rotation&gt;
    &lt;icon&gt;google.maps.SymbolPath.CIRCLE&lt;/icon&gt;
    &lt;fillColor&gt;#0099FF&lt;/fillColor&gt;
   &lt;/marker&gt;
   &lt;marker&gt;
    &lt;lat&gt;50.12173&lt;/lat&gt;
    &lt;lng&gt;-5.53225&lt;/lng&gt;
    &lt;Speed&gt;200&lt;/Speed&gt;
    &lt;rotation&gt;0&lt;/rotation&gt;
    &lt;icon&gt;google.maps.SymbolPath.FORWARD_CLOSED_ARROW&lt;/icon&gt;
    &lt;fillColor&gt;#009933&lt;/fillColor&gt;
   &lt;/marker&gt;
  &lt;/markers&gt;
  </code></pre>
  
  <p>Can anyone help?</p>
  
  <p>EDIT:</p>
  
  <p>I am part of the way there thanks to Jared Smith. So the rotation works as that is a number, but the path and fillColor are both strings. Can someone advise how to do this with strings?</p>
  
  <pre><code>var marker = new google.maps.Marker({
              position: markerCoords,
              title: title,
              icon: {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight: 2,
                  fillColor: '#009933',
                  fillOpacity: 1,
                  rotation: parseInt($(this).find('rotation').text(), 10),
                  anchor: new google.maps.Point(0,2)
        },
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <p>This isn't rendering. Any ideas:</p>
  
  <pre><code>  var title = 'Speed: '+$(this).find('Speed').text();
          var lat = $(this).find('lat').text();
          var lng = $(this).find('lng').text();
          //var rotation = $(this).find('rotation').text();
          var type = (function(foo) {
              var arr = foo.find('icon').text().split('.');
              return arr[arr.length-1];
          })($(this))
  
          var markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
          bounds.extend(markerCoords);
          var marker = new google.maps.Marker({
              position: markerCoords,
              title: title,
              icon: {
                  path: new google.maps.SymbolPath[arr],
                  scale: 5,
                  strokeWeight: 2,
                  fillColor: '#009933',
                  fillOpacity: 1,
                  rotation: parseInt($(this).find('rotation').text(), 10),
                  anchor: new google.maps.Point(0,2)
        },
  </code></pre>
  
  <p>And it doesn't when I use this either:</p>
  
  <pre><code>            icon: {
                  path: new google.maps.SymbolPath[type],
  </code></pre>
  
  <p>Can you see if I am applying your code incorrectly?</p>