WordPress.org

Ready to get started?Download WordPress

Forums

Leaflet Maps Marker (Google Maps, OpenStreetMap, Bing Maps)
[resolved] Google Maps API v3 Styled Maps (11 posts)

  1. jordas
    Member
    Posted 1 year ago #

    Maybe an impossible request,

    but is there a way to style the google roadmaps in this plugin, through the v3 Styling options? I cannot find wether, how and where the code could be added to do this.

    assigning the mapOptions to the same containing DiV does not work, unfortunately.

    I can have limited control over the API display in the leaflet.js, but I don't know how to write stylers in there. Any other way?

    Thanks,
    S

    http://wordpress.org/extend/plugins/leaflet-maps-marker/

  2. RobertHarm
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Jordas,
    thanks for your input - didnt think about styling Google Maps yet as main focus was on OpenStreetMap by now. Will check if this is possibile and if yes put it on the roadmap for one of the next releases.
    regards,
    Robert

    PS: If you like using my plugin, please rate it on wordpress.org ;-)

  3. jordas
    Member
    Posted 1 year ago #

    Will do,

    even if it's only for the fact you have an amazing response time on these forum threads. Quite rare :)

    to give you the right thing to go look at: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

    Just as an idea : you could maybe put this in the Google section of the plugin preferences (as you can probably guess I have been thinking quite extensively about this). It would be great if you would make a link to the above mentioned wizard page (with a blank target) so you can jump back and enter the line of code given to you at 'show JSON' somewhere in a designated field. Alternatively you could build your own wizard of course, but maybe it is easiest to just outsource that part ;)

    For now: can you keep me posted on your findings? Even a more 'dirty' solution would be a great help.

  4. jordas
    Member
    Posted 1 year ago #

    PS: with dirty i mean a piece of code I could write into one of the plugin files, instead of coloring the map with colored markers on my screen ;)

  5. RobertHarm
    Member
    Plugin Author

    Posted 1 year ago #

    Hi jordas,
    sorry but currently I dont have much time left for singe plugin customizations. Looking more for a general way to solve this in one of the next versions...
    regards,
    Robert

  6. jordas
    Member
    Posted 1 year ago #

    Hey Robert,

    I figured it out. You can write in leaflet.js at the // Google Maps plugin// line 12. You have to slightly change the syntax of the JSON, but it works like a charm. I think it can easily be set to selection options in the admin, even cooler would be a script that corrects the JSON syntax so you can paste whatever the google wizard gives you.

    example of the code: var styles=[{elementType:'geometry.fill', stylers:[{saturation:-100}]},] ; map.setOptions({styles: styles});

  7. RobertHarm
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Jordas,
    thanks for pointing this out - will keep this in mind,
    regards,
    Robert

  8. jordas
    Member
    Posted 1 year ago #

    You're welcome bra'

    Thanks for the plugin! It kicks *ss

  9. dimitri_d
    Member
    Posted 1 year ago #

    Hi Jordas,

    I am also looking for how to style the google maps with this great plugin, but can't make it work.

    Could you explain more precisely what do you mean by "slightly change the syntax of the JSON" ?

    I cannot figure out where to write the following code: var styles=[{elementType:'geometry.fill', stylers:[{saturation:-100}]},] ; map.setOptions({styles: styles}); ?

    Thanks for your help !
    Best,

  10. jordas
    Member
    Posted 1 year ago #

    Hey Dimitri,

    here's what you do. Open Leaflet.js. Find streetViewControl:false}); after the ; you can place your code, for instance: var styles=[ {elementType: 'labels.text.fill', stylers: [ { visibility: 'on' }, { weight: 0.1 }, { color: '#000000' } ] } ] ; map.setOptions({styles: styles}); make sure you place this before the next var (which is called var_this=this;this._reposition=google.maps.event)

    Hope this helps, good luck!

  11. dimitri_d
    Member
    Posted 1 year ago #

    It worked !
    Thanks a lot !

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic