change customize the color scheme of a Google Map?

change customize the color scheme of a Google Map? http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width: 100%; height: 400px"></div>
    <p>
    This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.

</body>

</html>

JavaScript

var infobox = new InfoBox();

function initialize() {
        var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

        var myMapOptions = {
             zoom: 15,
             center: secheltLoc,
             mapTypeId: google.maps.MapTypeId.ROADMAP,

        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
    google.maps.event.addListener(map, "click", function (e) {
      infobox.close();
    });
    
    
var marker = createMarker(map, new google.maps.LatLng(49.47016, -123.76007),
"test2<br>test2<br>test2<br>test2<br>test2<br>test2<br>test2<br>");
var marker2 = createMarker(map, new google.maps.LatLng(49.47216, -123.76307),
        "City Hall, Sechelt<br>British Columbia<br>Canada");

      
    }

function createMarker(map, latlng, html)
{
        var boxText = document.createElement("div");
        boxText.style.cssText = "border: none; margin-top: 6px; background: green; color: black; padding: 5px;";
        boxText.innerHTML = html;

    var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: {                
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };
    
   var marker = new google.maps.Marker({
       map: map,
       draggable: true,
       position: latlng,
       visible: true
   });   

 
    google.maps.event.addListener(marker, "click", function (e) {
      infobox.setOptions(myOptions);
      infobox.open(map, this);
});

    return marker;
}