WordPress.org

Ready to get started?Download WordPress

Forums

Geo Mashup
[resolved] Map Styling (5 posts)

  1. mortonc
    Member
    Posted 2 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 2 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 2 months ago #

    Thanks,

    Where should that code be placed?

  4. mortonc
    Member
    Posted 2 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 2 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

Reply

You must log in to post.

About this Plugin

About this Topic