Title: Styled Maps Last modified: August 20, 2016 --- # Styled Maps * Resolved [Brian Graham](https://wordpress.org/support/users/briangraham91/) * (@briangraham91) * [13 years, 5 months ago](https://wordpress.org/support/topic/styled-maps/) * [http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html](http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html) * Just like that page there that lets you edit the map and generated JSON or a static link to a customized map, does this plugin support editing the map style anywhere? * [http://wordpress.org/extend/plugins/store-locator-le/](http://wordpress.org/extend/plugins/store-locator-le/) Viewing 15 replies - 1 through 15 (of 15 total) * Plugin Author [Lance Cleveland](https://wordpress.org/support/users/charlestonsw/) * (@charlestonsw) * [13 years, 5 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271821) * You can change a TON of settings with the map via the Map Settings page, especially with the Pro Pack. You can also tweak the search form and results with the Pro Pack, Enhanced Search, and Enhanced Results add-ons. * Thread Starter [Brian Graham](https://wordpress.org/support/users/briangraham91/) * (@briangraham91) * [13 years, 5 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271822) * Thank you for that standardized response. I already have the Pro Pack so I know there is no setting for what I asked. * Please read my question and tell me if there is a way to do what I am asking in the backend. * Plugin Author [Lance Cleveland](https://wordpress.org/support/users/charlestonsw/) * (@charlestonsw) * [13 years, 5 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271861) * [@brian](https://wordpress.org/support/users/brian/) Graham – you question is somewhat vague. You want an editor just like the one you linked to? No, Store Locator Plus does not have that. * Are there ways to do that in the backend? Of course. The entire product is open source and uses standard Google Maps API V3 hooks. * You can also modify the JSONP responses to add/remove any data you’d like. It is all handled via the AJAX listener which is in its own class. * As you may already know, Google Maps can also be heavily styled with custom CSS. Since you already are familiar with the Pro Pack you know about the custom CSS field under General Settings where you can creating and/or override any CSS rule without editing code or built-in CSS files. * Sorry you felt it was a standardized response. Kind of funny you think that as I’m the ONLY person handling EVERYTHING including support and there is NOTHING scripted. Maybe I should create some canned responses and hot-key them so I can speed up my free support answers. It sure would save me a TON of time doing stuff that generates little-to-no income. * [l0gan0](https://wordpress.org/support/users/l0gan0/) * (@l0gan0) * [13 years, 4 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271975) * I think he was asking where to paste the generated JSON from the Google Map Wizard. example: * ``` [ { "elementType": "geometry.stroke", "stylers": [ { "hue": "#ff0000" } ] } ] ``` * Plugin Author [Lance Cleveland](https://wordpress.org/support/users/charlestonsw/) * (@charlestonsw) * [13 years, 3 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271978) * [@logan](https://wordpress.org/support/users/logan/) – thanks for the input. What does that do? Is there a URL that shows it? * I know, I’m supposed to be a Google Maps wizard, right? Problem is I learned a LOT of what was done with V2 of the API and it was heavily modified in V3. I still don’t know HALF the tricks in there, but I’m learning more every day. 🙂 * [l0gan0](https://wordpress.org/support/users/l0gan0/) * (@l0gan0) * [13 years, 3 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271979) * Google Maps Wizard allows you to do some pretty cool customizations to the map itself, beyond what you could do in V2. If you’re not familiar with it you can check it out here: [http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html](http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html) * To customize a map in Store Loctor Plus, I added the JSON it generated to the csl.js file under options: * ``` styles: [ { "elementType": "geometry.stroke", "stylers": [ { "hue": "#ff0000" } ] } ] ``` * I’m not sure if this will be overwritten when you update the plugin or not, but you can always keep a backup and quickly restore your styles. Hope that helps clarify! * Plugin Author [Lance Cleveland](https://wordpress.org/support/users/charlestonsw/) * (@charlestonsw) * [13 years, 3 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271980) * Very cool! Thanks for sharing! * Thread Starter [Brian Graham](https://wordpress.org/support/users/briangraham91/) * (@briangraham91) * [13 years, 3 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271981) * Thanks for figuring out how to do this, much appreciated. * Thread Starter [Brian Graham](https://wordpress.org/support/users/briangraham91/) * (@briangraham91) * [13 years, 3 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271982) * [@l0gan0](https://wordpress.org/support/users/l0gan0/) * Can you show me the JSON inline with csl.js a few lines above and below, so I can see how you put it there? * [l0gan0](https://wordpress.org/support/users/l0gan0/) * (@l0gan0) * [13 years, 3 months ago](https://wordpress.org/support/topic/styled-maps/#post-3271984) * You put it with the rest of the map’s options: * ``` if (this.gmap == null) { this.options = { mapTypeControl: this.mapTypeControl, mapTypeId: this.mapType, overviewMapControl: this.overviewControl, scrollwheel: !this.disableScroll, center: center, zoom: parseInt(this.zoom), scaleControl: this.mapScaleControl, overviewMapControlOptions: { opened: this.overviewControl }, styles: [ { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#169da3" } ] ``` * [TGL_Curt](https://wordpress.org/support/users/tgl_curt/) * (@tgl_curt) * [13 years ago](https://wordpress.org/support/topic/styled-maps/#post-3271994) * Just wanted to drop a huge thanks l0gan0, I had spent hours trying to figure out how to do exactly that. Dropped my styles in and boom, worked perfectly. Awesome! * Charleston – these styles are just some of the awesome new features available to Google Maps developers, you should really get up to speed on them and incorporate it in your plugin. If nothing else, even some way to drop in custom style code through the front end would be great. You’ve got the best locator plugin on WP, but since it relies so heavily on Google maps it would serve you well to stay in tune with what they offer and incorporate it. * [Even Dawn](https://wordpress.org/support/users/even-dawn/) * (@even-dawn) * [12 years, 8 months ago](https://wordpress.org/support/topic/styled-maps/#post-3272009) * Hi there, I need to drop in the styles code as well. I installed Store Locator but there is no csl.js file to edit. This is the list of files I can see: * ``` store-locator/store-locator.php store-locator/js/store-locator.js store-locator/js/store-locator-js.php store-locator/js/functions.js store-locator/js/jquery.prettyPhoto.js store-locator/css/sl-pop.css store-locator/css/admin.css store-locator/css/store-locator.css store-locator/sl-functions.php store-locator/readme.txt store-locator/sl-define.php ``` * Has there been some change to the plugin or am I looking in the wrong place? * Thanks for any help! * [l0gan0](https://wordpress.org/support/users/l0gan0/) * (@l0gan0) * [12 years, 8 months ago](https://wordpress.org/support/topic/styled-maps/#post-3272010) * Hi Dawn, Check in the core folder: core > js > csl.js * [@tgl_curt](https://wordpress.org/support/users/tgl_curt/) – thanks! It took me a long time to figure out, and thought I could save you guys the time! * Cheers, Logan * Plugin Author [Lance Cleveland](https://wordpress.org/support/users/charlestonsw/) * (@charlestonsw) * [12 years, 8 months ago](https://wordpress.org/support/topic/styled-maps/#post-3272011) * Product support is provided here: [http://www.charlestonsw.com/forums/forum/support-2/](http://www.charlestonsw.com/forums/forum/support-2/) * [Gkatzos](https://wordpress.org/support/users/gkatzos/) * (@gkatzos) * [12 years, 5 months ago](https://wordpress.org/support/topic/styled-maps/#post-3272013) * Hi, just in case someone is still stuck. * I didn’t want to edit the plugin files so I found the following solution: * ``` ``` * You can also set the opacity of the map container to 0 and fadeTo 1 after the styles are applied. Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Styled Maps’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/store-locator-le_dac7af.svg) * [Store Locator Plus®](https://wordpress.org/plugins/store-locator-le/) * [Frequently Asked Questions](https://wordpress.org/plugins/store-locator-le/#faq) * [Support Threads](https://wordpress.org/support/plugin/store-locator-le/) * [Active Topics](https://wordpress.org/support/plugin/store-locator-le/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/store-locator-le/unresolved/) * [Reviews](https://wordpress.org/support/plugin/store-locator-le/reviews/) ## Tags * [api](https://wordpress.org/support/topic-tag/api/) * [googlemaps](https://wordpress.org/support/topic-tag/googlemaps/) * [Styled](https://wordpress.org/support/topic-tag/styled/) * 15 replies * 6 participants * Last reply from: [Gkatzos](https://wordpress.org/support/users/gkatzos/) * Last activity: [12 years, 5 months ago](https://wordpress.org/support/topic/styled-maps/#post-3272013) * Status: resolved