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

by mescalito2345

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
More collors: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>

CSS

#map_canvas{
    width: 400px;
    height: 300px;
}

#current{
     padding-top: 25px;
}

JavaScript

var settingsItemsMap = {
    zoom: 12,
    center: new google.maps.LatLng(40.768516981, -73.96927308),
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE
    },
    styles:[
        { featureType: "water", stylers: [ { hue: "#F4B741"} ] },
        { featureType: "road", stylers: [ { hue: "#ff0000" } ] }
    ],
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), settingsItemsMap );

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(40.768516981, -73.96927308),
    draggable: true
});

google.maps.event.addListener(myMarker, 'dragend', function(evt){
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

google.maps.event.addListener(myMarker, 'dragstart', function(evt){
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});

map.setCenter(myMarker.position);
myMarker.setMap(map);