title: Google Maps marker and polyline color not rendered in IE7/8
body: <p>I have a Google Maps v3 on my site that displays markers and polylines. Each set of markers + polylines have their own colors (red, yellow, blue, etc.). This works fine in FF/Chrome/Safari but not in IE7/8 (Work fine in IE9).</p>
  
  <p>Here is what the markers look like in IE8/XP: <img src="https://dl.dropbox.com/u/1111586/no-color-marker.png" alt="markers without colors"></p>
  
  <p>The markers should look like this (in Chrome): <img src="https://dl.dropbox.com/u/1111586/colors-markers.png" alt="markers with colors"></p>
  
  <p>There are no js errors in DevTool or Firebug Lite.</p>
  
  <p>Here is the code I'm using to display the markers and polylines:</p>
  
  <pre><code>Maps = {
      googleMap: null,
      paths: [],
      wayPoints: null,
      colors: ["#00aeef", "#ec008c", "#41ad49", "#d2232a", "#fff200"],
      minZoomLevel: 2,
  
      init: function () {
          var mapOptions = {
            zoom: Maps.minZoomLevel,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          Maps.googleMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
          google.maps.event.addListener(Maps.googleMap, 'zoom_changed', function() {
              if (Maps.googleMap.getZoom() &lt; Maps.minZoomLevel)
                  Maps.googleMap.setZoom(Maps.minZoomLevel);
          });
      },
  
      plotPaths: function (paths) {
          if (paths &amp;&amp; paths.length === 0) {
              var latLng = new google.maps.LatLng(41.850033,-87.6500523);
              Maps.googleMap.setCenter(latLng);
              return;
          }
  
          Maps.paths = paths;
          //console.log(Maps.paths);
          Maps.wayPoints = [];
          for (pathIndex in Maps.paths) {
              Maps.wayPoints[pathIndex] = [];
          }
  
          for (pathIndex in Maps.paths) {
              for (addressIndex in Maps.paths[pathIndex]) {
                  Maps.getLatLong(Maps.paths[pathIndex][addressIndex], pathIndex, Maps.addWaypoint);
              }
          }
      },
  
      addWaypoint: function(pathIndex, latLng, address) {
          // console.log("pathIndex: " + pathIndex);
  
          if (latLng === null) {
              Maps.googleMap.setCenter(new google.maps.LatLng(32.1574351, -82.90712300000001));
              return;
          }
          // console.log("callback - latLng: " + latLng.toString());
  
          Maps.wayPoints[pathIndex].push(latLng);
  
          if (Maps.wayPoints[pathIndex].length == Maps.paths[pathIndex].length) {
              if (typeof console !== "undefined") {
                  console.log("Address: " + address);
                  console.log(Maps.wayPoints[pathIndex]);
                  console.log("Color: " + Maps.colors[pathIndex - 1]);
              }
              Maps.setShipmentPath(Maps.wayPoints[pathIndex], Maps.colors[pathIndex - 1]);
          }
  
  
          var marker = new google.maps.Marker({
              position: latLng,
              map: Maps.googleMap,
              title: address,
              icon: {
                  path: google.maps.SymbolPath.CIRCLE,
                  scale: 4,
                  fillColor: Maps.colors[pathIndex - 1],
                  fillOpacity: 1.0,
                  strokeColor: Maps.colors[pathIndex - 1]
              }
          });
  
          Maps.googleMap.setCenter(latLng);
      },
  
      setShipmentPath: function (wayPoints, color) {
          var lineSymbol = {
              path: 'M 0,-1 0,1',
              strokeOpacity: 1,
              scale: 4
          };
  
          var shipmentPath = new google.maps.Polyline({
              path: wayPoints,
              strokeColor: color,
              strokeOpacity: 0,
              strokeWeight: 10,
              geodesic: true,
              icons: [{
                  icon: lineSymbol,
                  offset: '0',
                  repeat: '20px'
              }]
          });
  
          shipmentPath.setMap(Maps.googleMap);
      },
  
      getLatLong: function (address, pathIndex, callback) {
          // console.log("Address: " + address);
  
          var geocoder = new google.maps.Geocoder();
          geocoder.geocode(
              {'address': address},
              function(results, status) {
                  var latLng = null;
  
                  if (status !== google.maps.GeocoderStatus.OK) {
                      if (typeof console !== "undefined") {
                          console.log("Error!");
                          console.log(status);
                      }
                      return;
                  }
  
                  if (results &amp;&amp; results.length &gt; 0) {
                      // console.log("Formatted Address: " + results[0].formatted_address);
                      // console.log("Lat Long: " + results[0].geometry.location.toString());
                      latLng = results[0].geometry.location;
  
                      if (callback) {
                          callback(pathIndex, latLng, results[0].formatted_address);
                      }
                  }
              }
          );
      }
  };
  </code></pre>
  
  <p>where paths in <code>plotPaths()</code> function is a 2 dimensional array of list of addresses. e.g.</p>
  
  <pre><code>var addresses = new Array();
  addresses["1"] = ["London  UK EC1", "Paris  FR "];
  addresses["2"] = ["Vancouver BC CA "];
  addresses["3"] = ["Melborne Vic AU "];
  addresses["4"] = ["Cape Town  ZA "];
  addresses["5"] = ["Tokyo  JP ", "Seoul Seoul KR 9199"];
  </code></pre>