WordPress.org

Forums

Store Locator Plus - Google Maps
[resolved] Styled Maps (16 posts)

  1. Brian Graham
    Member
    Posted 2 years ago #

    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/

  2. Store Locator Plus
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  3. Brian Graham
    Member
    Posted 2 years ago #

    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.

  4. Store Locator Plus
    Member
    Plugin Author

    Posted 2 years ago #

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

  5. l0gan0
    Member
    Posted 2 years ago #

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

    [
      {
        "elementType": "geometry.stroke",
        "stylers": [
          { "hue": "#ff0000" }
        ]
      }
    ]
  6. Store Locator Plus
    Member
    Plugin Author

    Posted 2 years ago #

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

  7. l0gan0
    Member
    Posted 2 years ago #

    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

    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!

  8. Store Locator Plus
    Member
    Plugin Author

    Posted 2 years ago #

    Very cool! Thanks for sharing!

  9. Brian Graham
    Member
    Posted 2 years ago #

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

  10. Brian Graham
    Member
    Posted 2 years ago #

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

  11. l0gan0
    Member
    Posted 2 years ago #

    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" }
    						]
  12. TGL_Curt
    Member
    Posted 1 year ago #

    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.

  13. Even Dawn
    Member
    Posted 1 year ago #

    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!

  14. l0gan0
    Member
    Posted 1 year ago #

    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

  15. Store Locator Plus
    Member
    Plugin Author

    Posted 1 year ago #

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

  16. Gkatzos
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Store Locator Plus - Google Maps
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic