How I can give a particular style to maps in drupal site based on gmap module I am currently developing a website which makes heavy use of gmap and location module.
I want to style maps in a particular style by appending style to google.maps.MapOptions.styles array, But maps in website still come out plain defaults.
I am not sure how I have to proceed, as firebug reports that style changes are done properly in styles array

(function() {
var style = [
{
    featureType: "landscape",
    elementType: "all",
    stylers: [
    { hue: "#ffa200" },
    { lightness: -20 }
    ]
},{
    featureType: "water",
    elementType: "all",
    stylers: [
    { hue: "#ff9100" },
    { lightness: 52 }
    ]
},{
    featureType: "administrative",
    elementType: "labels",
    stylers: [
    { hue: "#1100ff" },
    { saturation: -100 },
    { lightness: -18 }
    ]
},{
    featureType: "poi",
    elementType: "all",
    stylers: [
    { lightness: -18 },
    { visibility: "off" }
    ]
},{
    featureType: "landscape",
    elementType: "all",
    stylers: [
    { visibility: "off" }
    ]
},{
    featureType: "water",
    elementType: "labels",
    stylers: [
    { lightness: -18 },
    { visibility: "off" }
    ]
},{
    featureType: "road",
    elementType: "labels",
    stylers: [
    { visibility: "off" }
    ]
},{
    featureType: "administrative",
    elementType: "geometry",
    stylers: [
    { visibility: "simplified" }
    ]
},{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
    { saturation: -100 }
    ]
},{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
    { saturation: -100 }
    ]
},{
    featureType: "road.local",
    elementType: "geometry",
    stylers: [
    { lightness: -27 }
    ]
},{
    featureType: "transit",
    elementType: "all",
    stylers: [
    { visibility: "off" }
    ]
}
];

Drupal.behaviors.sepiaStyle = function(context) {
Drupal.gmap.addHandler('gmap', function(elem) {
    var obj = this;
    obj.bind("bootstrap_options", function() {
    var new_style = $.extend(obj.vars.styles, style)
    jQuery(elem).change(function() {
        obj.vars.styles= new_style;
    });

    });

});
};
}());


Any help is greatly appreciated. Thanks in advance
I managed to do it by changing a little bit the gmap.js file. At the line 358

obj.bind("boot", function () {
    obj.map = new google.maps.Map(elem, obj.opts);
});


Add these line:

obj.bind("boot", function () {
     obj.opts.styles = [
                                        {
                                            "featureType": "water",
                                            "stylers": [
                                                { "color": "#808084" }
                                            ]
                                        },{
                                            "featureType": "road",
                                            "stylers": [
                                                { "color": "#c8cacc" }
                                            ]
                                        },{
                                            "featureType": "landscape.man_made",
                                            "stylers": [
                                                { "color": "#b0b3b4" }
                                            ]
                                        },{
                                            "featureType": "road",
                                            "elementType": "labels.text.fill",
                                            "stylers": [
                                                { "color": "#000000" }
                                            ]
                                        },{
                                            "featureType": "poi",
                                            "stylers": [
                                                { "color": "#9c9ea2" }
                                            ]
                                        },{
                                            "featureType": "poi",
                                            "elementType": "labels.text.fill",
                                            "stylers": [
                                                { "color": "#000000" }
                                            ]
                                        },{
                                            "featureType": "administrative",
                                            "elementType": "labels.text.fill",
                                            "stylers": [
                                                { "color": "#808080" }
                                            ]
                                        },{
                                            "featureType": "landscape.natural",
                                            "stylers": [
                                                { "color": "#808084" }
                                            ]
                                        },{
                                            "featureType": "transit",
                                            "stylers": [
                                                { "color": "#c9c9cc" }
                                            ]
                                        },{
                                            "featureType": "transit.station.rail",
                                            "stylers": [
                                                { "color": "#838080" }
                                            ]
                                        },{
                                            "featureType": "road.arterial",
                                            "stylers": [
                                                { "color": "#adaeb1" }
                                            ]
                                        },{
                                            "featureType": "poi",
                                            "elementType": "labels.icon",
                                            "stylers": [
                                                { "color": "#3e3d3a" },
                                                { "visibility": "off" }
                                            ]
                                        },{
                                            "featureType": "transit.station",
                                            "elementType": "labels",
                                            "stylers": [
                                                { "visibility": "off" }
                                            ]
                                        },{
                                        }
                                    ];
    obj.map = new google.maps.Map(elem, obj.opts);

});


Also check this thread:

drupal.org