Adding Custom Map Styles to jQuery Store Locator Plugin

Question

I'm working on a store locator for a client site that uses the jQuery Store Locator plugin (https://github.com/bjorn2404/jQuery-Store-Locator-Plugin).

I'm trying to incorporate some custom map styles:

stylers: [
    { 'saturation': '-62' },
    { 'gamma': '0.5' }
  ]

I thought I could put them into the mapSettings parameter, but they're not being recognized. I've tried every bracket variation I can think of, to no avail.

I'm thinking now that I need to go into the jquery.storelocator.js, and add it there, but I'm having trouble finding where to put it (if that's even the best solution).

Any ideas?

UPDATE Here is the code as I have tried to implement it:

<script>
$(function() {
    $('#map-container').storeLocator({
        'dataType': 'json',
        'dataLocation': '/data/locations.php',
        'slideMap' : true,
        'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, stylers : [{'saturation' :'-62'}] }
    });
});
</script>

Answer 1

You can make an array e.g. gmapStyles containing styles for map and call it in mapSettings object. Look at the gmapStyles array in below function. and My map is looking like this http://voddemo.akkastech.com/category/2

<script>
    function newStoreLocatorInit(element= jQuery('#bh-sl-map-container'), type, ls){
        if(element.length > 0){
            var gmapStyles = [
                {"elementType": "labels","stylers": [{"visibility": "off"}]},
                {"featureType": "administrative","elementType": "geometry","stylers": [{"visibility": "off"}]},
                {"featureType": "administrative.land_parcel","stylers": [{"visibility": "off"}]},
                {"featureType": "administrative.land_parcel", "elementType": "geometry", "stylers": [{"color": "#ee99e6"}]},
                {"featureType": "administrative.neighborhood","stylers": [{"visibility": "off"}]},
                {"featureType": "landscape.man_made","elementType": "geometry","stylers": [{"color": "#dfe4e6"}]},
                {"featureType": "poi","stylers": [{"visibility": "off"} ] },
                {"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#a0ec96"}]},
                {"featureType": "road", "elementType": "geometry", "stylers": [{"color": "#bdc3cb"}]},
                {"featureType": "road", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]},
                {"featureType": "transit", "stylers": [{"visibility": "off"}]}
            ];
            element.storeLocator({
                callbackSuccess         : function(){
                    jQuery('.at-dataloader').fadeOut(300);
                    jQuery('.bh-sl-loc-list .list').fadeIn(300);
                },
                'infowindowTemplatePath'     : '/assets/js/plugins/storeLocator/templates/infowindow-description.html',
                'listTemplatePath'           : '/assets/js/plugins/storeLocator/templates/location-list-description.html',
                taxonomyFilters : {
                    'name':'name-filter',
                    'subcategoryname':'subcategoryname-filter',
                    'location':'location-filter',
                    'subcategoryid':'subcategoryid-filter'
                },
                /*distanceAlert: -1,*/
//                    querystringParams : true,
//                    fullMapStart:true,
                disableAlphaMarkers         : true,
                dataType                    : 'json',
                slideMap                    : false,
                defaultLoc                  : true,
                defaultLat                  : '44.9207462',
                defaultLng                  : '-93.3935366',
                visibleMarkersList          : false,
                listColor1                  : '',
                listColor2                  : '',
                /*maxDistance                 : false,*/
                markerCluster               : type != "true" ? {
                    zoomOnClick             : true,
                    styles                  : [{
                        width               : 40,
                        height              : 40,
                        textSize            : 14,
                        anchor              : [60, 42],
                        textColor           : '#fff',
                        backgroundSize      : 'cover',
                        backgroundPosition  : 'top, center',
                        cssClass            : 'at-iconcluster',
                        url                 : '/images/svg/iconcluster.svg',
                    }]
                } : null,
                mapSettings                 : {
                    zoom                    : 11,
                    disableDefaultUI        : true,
                    zoomControl             : true,
                    styles                  : gmapStyles,
                    mapTypeId               : google.maps.MapTypeId.ROADMAP,
//                        minZoom                    : 10,
//                        maxZoom                    : 12,
                },
                dataLocation                : ls ,
                // dataLocation             : '/data/locations.json' ,
                markerImg                   : '/images/svg/icon01.svg',
                markerDim                   : {
                    width: 36,
                    height: 45
                },
                selectedMarkerImg           : '/images/svg/icon02.svg',
                selectedMarkerImgDim        : {
                    width: 36,
                    height: 45
                },
                infoBubble: {
                    backgroundColor         : '#fff',
                    borderRadius            : 0,
                    borderWidth             : 0,
                    closeSrc                : '/assets/img/close-icon-dark.png',
                    disableAutoPan          : false,
                    shadowStyle             : 0,
                    padding                 : 0,
                    minWidth                : 370,
                    maxHeight               : 162,
                    backgroundClassName     : 'bh-sl-window',
                },
                callbackMapSet              : function(){

                },
                callbackMarkerClick     : function(){
                    setTimeout(function(){
                        ajaxCallsOnPopupNavBtnClick()
                        jQuery(".at-btnthemecontent").animatedModal({
                            color: 'rgba(222, 226, 228, 0.85)',
                            modalTarget:'at-themecontent',
                            animatedOut:'zoomOut',
                            animatedIn:'zoomIn',
                        });
                        jQuery('.at-btnthemecontent').on('click', function(){
                            jQuery('.at-mlogo').addClass('at-hideui');
                            jQuery('.at-sidebar').addClass('at-hideui');
                            jQuery('.at-toprightbox').addClass('at-hideui');
                            jQuery('.gmnoprint.gm-bundled-control').addClass('at-hideui');
                            jQuery('.at-btnfindoutmore').addClass('at-hideui');
                        });
                        jQuery('.close-at-themecontent.at-btnclose').on('click', function(){
                            jQuery('.at-mlogo').removeClass('at-hideui');
                            jQuery('.at-sidebar').removeClass('at-hideui');
                            jQuery('.at-toprightbox').removeClass('at-hideui');
                            jQuery('.gmnoprint.gm-bundled-control').removeClass('at-hideui');
                            jQuery('.at-btnfindoutmore').removeClass('at-hideui');
                        });
                    }, 1000)
                },
                callbackListClick       : function(){
                    setTimeout(function(){
                        ajaxCallsOnPopupNavBtnClick()
                        jQuery(".at-btnthemecontent").animatedModal({
                            color: 'rgba(222, 226, 228, 0.85)',
                            modalTarget:'at-themecontent',
                            animatedOut:'zoomOut',
                            animatedIn:'zoomIn',
                        });
                        jQuery('.at-btnthemecontent').on('click', function(){
                            jQuery('.at-mlogo').addClass('at-hideui');
                            jQuery('.at-sidebar').addClass('at-hideui');
                            jQuery('.at-toprightbox').addClass('at-hideui');
                            jQuery('.gmnoprint.gm-bundled-control').addClass('at-hideui');
                            jQuery('.at-btnfindoutmore').addClass('at-hideui');
                        });
                        jQuery('.close-at-themecontent.at-btnclose').on('click', function(){
                            jQuery('.at-mlogo').removeClass('at-hideui');
                            jQuery('.at-sidebar').removeClass('at-hideui');
                            jQuery('.at-toprightbox').removeClass('at-hideui');
                            jQuery('.gmnoprint.gm-bundled-control').removeClass('at-hideui');
                            jQuery('.at-btnfindoutmore').removeClass('at-hideui');
                        });
                    }, 1000)
                },
                callbackNoResults : function(){
                    alert('No locations were found with the given criteria. Please modify your selections or input.')
                },
                callbackFilters : function(){

                }

            });
        }
    }

Answer 2

The MapOption for setting the map style is styles, not stylers. Change:

$(function() {
    $('#map-container').storeLocator({
        'dataType': 'json',
        'dataLocation': '/data/locations.php',
        'slideMap' : true,
        'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, stylers : [{'saturation' :'-62'}] }
    });
});

To:

$(function() {
    $('#map-container').storeLocator({
        'dataType': 'json',
        'dataLocation': '/data/locations.php',
        'slideMap' : true,
        'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, styles : [{stylers : [{'saturation' :'-62'}]}] }
    });
});

Answer 3

The answer turned out to be a syntax issue, after all. The mapSettings property is passed to the MapOptions class, and requires both the styles and stylers parameters:

'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, styles : [{stylers: [{'saturation' :'-62'}]}] }

Inside the styles bracket, you can add as many custom settings as you like, so long as you use the stylers parameter as well:

'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, styles : [
            {
                "featureType": "landscape",
                "stylers": [
                  { "saturation": -74 },
                  { "lightness": 82 },
                  { "gamma": 1.18 },
                  { "color": "#eleff2" }
                ]
            },{
                "featureType": "water",
                "stylers": [
                  { "saturation": -49 },
                  { "color": "#eleff2" },
                  { "lightness": -1 },
                  { "gamma": 1 }
                ]
            },{
                "featureType": "road",
                "stylers": [
                  { "hue": "#0099ff" },
                  { "lightness": 4 },
                  { "saturation": -78 }
                ]
            },{
                "featureType": "poi",
                "stylers": [
                  { "hue": "#0099ff" },
                  { "saturation": -38 },
                  { "lightness": 67 }
                ]
              }
            ] }