Q:

Google Maps: how to efficiently change marker when mouseover

I want to dynamically change the color/text of any google maps marker.
Run the code: http://jsbin.com/odimop/edit#javascript,html,live
As you can see the problem of using a variable (var styloo) is when properties change then all markers using that variable behave in the same way, in this case marker4 and marker5. This approach is cumbersome and tedious when the map has too many markers because each marker will need one styled variable
I'm looking for a solution that use something like: this.styleIcon.color = "00ff00";. But so far is not working.
Any idea? please!
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
        <script type="text/javascript">
            var styleIcon;

            function initialize() {
                var myLatLng = new google.maps.LatLng(37.313477473067, -121.880502070713);
                var myOptions = {
                    zoom: 10,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                var marker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"00ffff",text:"Hover Me, this doesn't work"}),position:new google.maps.LatLng(37.5, -121.880502070713),map:map});
                var marker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"ff0000",text:"Just a Marker"}),position:new google.maps.LatLng(37.4, -121.880502070713),map:map});

                google.maps.event.addDomListener(marker2,"mouseover", function(o){
                    this.setAnimation(google.maps.Animation.BOUNCE);
                    this.styleIcon.color = "00ff00";
                    this.styleIcon.text = "it does not change :(";
                });

                styloo = new StyledIcon(StyledIconTypes.BUBBLE,{color:"#95AA7B",text:"click me!",fore:"#ffffff"});
                var marker4 = new StyledMarker({styleIcon: styloo,position:new google.maps.LatLng(37.2, -121.88),map:map});
                var marker5 = new StyledMarker({styleIcon: styloo,position:new google.maps.LatLng(37.1, -121.88),map:map});
                google.maps.event.addDomListener(marker4,"click", function(o){
                    this.setAnimation(google.maps.Animation.BOUNCE);
                    styloo.set("fore","#ffffff");//test color
                    styloo.set("color","#C2554D");// background color
                    styloo.set("text","color changed");
                });

            }
        </script>

    </head>
    <body style="margin:0px; padding:0px;" onload="initialize()">
        <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    </body>

A:

As per StyledMarker examples, you need to use the set(property, value) methods, like this:
styleIcon.set("text","Elevation: " + results[0].elevation + "m");

In your case, change the mouseover handler to this:
this.styleIcon.set('color', '00ff00');
this.styleIcon.set('text', 'it does not change :(');

As for the other problem, where both change at once, you'll need to create a StyledIcon for each StyledMarker. I'd just add a function that returns a new icon each time.
function createStyle() { return new StyledIcon(StyledIconTypes.BUBBLE,{color:"#95AA7B",text:"click me!",fore:"#ffffff"}); }

var marker4 = new StyledMarker({styleIcon: createStyle(),position:new google.maps.LatLng(37.2, -121.88),map:map});
var marker5 = new StyledMarker({styleIcon: createStyle(),position:new google.maps.LatLng(37.1, -121.88),map:map});

google.maps.event.addDomListener(marker4,"click", function(o){
    this.setAnimation(google.maps.Animation.BOUNCE);
    this.styleIcon.set("fore","#ffffff");//test color
    this.styleIcon.set("color","#C2554D");// background color
    this.styleIcon.set("text","color changed");
});

