How to use Google Maps Stylers with jquery-ui-map plugin?

I am too weak at writing js. I need to create and configure a google map. For this I am using jquery-ui-map plugin and this code:

if ($("#map_canvas").length){
$('#map_canvas').gmap().bind('init', function(ev, map) {
    $("[data-gmapping]").each(function(i,el) {
        var data = $(el).data('gmapping');
        $('#map_canvas').gmap('addMarker', {'id':, 'tags':data.tags, 'position': new google.maps.LatLng(, data.latlng.lng), 'bounds':true }, function(map,marker) {

            $(el).click(function() {
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': $(el).find('.info-box').html() }, this);


Where do I need to insert these generated variables:

{ stylers: [ { lightness: 7 }, { saturation: -100 } ] }


The links I used are:


source to share

1 answer

There are many places for example. to the display instance:


$('#map_canvas').gmap()  //...more code



$('#map_canvas').gmap({styles:[{stylers:[{lightness:7},{saturation:-100}]}]})  //...more code


gmap-constructor accepts all options it accepts google.maps.Map.setOptions()

. One such option is "style", which is expected to be an array with google.maps.MapTypeStyle

(your generated output is MapTypeStyle)



All Articles