Ty Morton Ty Morton - 1 month ago 11
jQuery Question

Adding Custom Map Styles to jQuery Store Locator Plugin

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

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 }
                ]
              }
            ] }
Comments