WordPress.org

Forums

Geo Mashup
[resolved] Map Styling (9 posts)

  1. mortonc
    Member
    Posted 11 months ago #

    I'm trying to style the actual map using a theme from snazzy maps at http://snazzymaps.com/style/25/blue-water

    I tried copying the map-style-default.css to my theme file and renaming, then inserting the snazzy maps code but that didn't seem to do the trick.

    The styling code is this javascript array:

    [{"featureType":"water","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"landscape","stylers":[{"color":"#f2f2f2"}]},{"featureType":"road","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]}]

    Any ideas?

    https://wordpress.org/plugins/geo-mashup/

  2. Dylan Kuhn
    Member
    Plugin Author

    Posted 11 months ago #

    Since Google uses javascript for styling you'll have to use Geo Mashup's javascript API to apply them:

    https://code.google.com/p/wordpress-geo-mashup/wiki/JavaScriptApi

    Here's an example:

    https://gist.github.com/cyberhobo/5ab7eb866650ad92088c

  3. mortonc
    Member
    Posted 11 months ago #

    Thanks,

    Where should that code be placed?

  4. mortonc
    Member
    Posted 11 months ago #

    I've placed

    /**
     * An example of applying custom styles to a Geo Mashup Google V3 map.
     *
     * There's a wizard for making your own style arrays at https://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
     **/
    GeoMashup.addAction( 'loadedMap', function( properties, map ) {
    	var google_map = map.getMap();
    	var custom_styles = [{"featureType":"water","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"landscape","stylers":[{"color":"#f2f2f2"}]},{"featureType":"road","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]}];
    	var map_type = new google.maps.StyledMapType( custom_styles, { name: 'custom' } );
    
    	google_map.mapTypes.set( 'custom', map_type );
    	google_map.setMapTypeId( 'custom' );
    } );

    in map-style.css in my theme's file but that doesn't seem to work

  5. Dylan Kuhn
    Member
    Plugin Author

    Posted 11 months ago #

    Install custom javascript files in the geo-mashup-custom plugin folder, as described here:

    https://code.google.com/p/wordpress-geo-mashup/wiki/JavaScriptApi

  6. CuberToy
    Member
    Posted 6 months ago #

    Getting that post a second life.
    So I must be really stupid or doing something wrong, but I just can't seem to know where to put the custom.js file... I guess it was directly in the geo-mashup folder, but it doesn't seems to work... And the wiki doesn't tell much. Although it's also possible my code is all wrong.

    EDIT : Ok, just understood that I should create a "geo-mashup-custom"... Still working on it though.

  7. CuberToy
    Member
    Posted 6 months ago #

    Ok so, I'm stupid, I totally forgot to activate the custom plugin... Stupid... ><

  8. mdziedzic
    Member
    Posted 6 months ago #

    I'm having trouble using the above to do some minor CSS changes on the info-window (basically, I just want to change the font-family and font-size).

    I've already used the above method to change the map markers, but again, can't figure out how to edit the CSS for the text in the info-window.

  9. Ismael Latorre
    Member
    Posted 2 months ago #

    Same problem with the CSS for the text in the info window: how do I change the style?

Reply

You must log in to post.

About this Plugin

About this Topic