title: Google Maps - setIcon code makes marker disappear
body: <p>I'm trying to dynamically change a marker's icon when the marker is clicked. I have multiple markers on the map (gathered through a database query), and this is the code I'm currently using - all pretty standard stuff:</p>
  
  <pre><code>function initialize() {
          var myOptions = {
            center: new google.maps.LatLng(-30,135),
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map"),
              myOptions);
          var bikeicon = "images/bike.png";
  
  
      &lt;?php
      $result=mysql_query("select * from sites");
      while($row=mysql_fetch_assoc($result)){
          ?&gt;
          marker = new google.maps.Marker({
          position: new google.maps.LatLng(&lt;?php echo $row['Latitude']; ?&gt;, &lt;?php echo $row['Longitude']; ?&gt;),
          map: map, icon: bikeicon});
  
          infoWindow = new google.maps.InfoWindow();
  
          marker.html="&lt;?php echo stripslashes($row['ShortDesc']); ?&gt;";
  
          google.maps.event.addListener(marker, 'click', function(){
              //show infowindow
              infoWindow.setContent(this.html);
              infoWindow.open(map, this);
              //change icon color
              var icon = new google.maps.MarkerImage({ url:"http://jovansfreelance.com/bikestats/images/bike_red.png"});
                  this.setIcon(icon);     //why doesn't this work?
  
          })
          &lt;?php
      }
      ?&gt;
  
  }
  </code></pre>
  
  <p>The infoWindow code works fine, but the seticon code just makes the marker disappear and doesn't show the new marker icon. The new icon URL is valid, as you can see by opening it in your browser.</p>
  
  <p>So can anyone tell me why this code isn't working?</p>