Styled Maps

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.

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.

@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.

I think he was asking where to paste the generated JSON from the Google Map Wizard.
example:

[
  {
    "elementType": "geometry.stroke",
    "stylers": [
      { "hue": "#ff0000" }
    ]
  }
]

@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. ??

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: https://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!

Very cool! Thanks for sharing!

Thanks for figuring out how to do this, much appreciated.

@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?

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

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.

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!

Hi Dawn,
Check in the core folder:
core > js > csl.js

@tgl_curt – thanks! It took me a long time to figure out, and thought I could save you guys the time!

Cheers,
Logan

Product support is provided here:
https://www.charlestonsw.com/forums/forum/support-2/

Hi, just in case someone is still stuck.

I didn’t want to edit the plugin files so I found the following solution:

<script>
$(window).load(function (){
  var mapStyles = [{ "stylers": [{ "hue": '#ff0000'}, { "lightness": -1} ]}];
  loaded_map = window.cslmap.gmap;
  loaded_map.setOptions({ styles:mapStyles});
});
</script>

You can also set the opacity of the map container to 0 and fadeTo 1 after the styles are applied.