Geo Mashup
[resolved] Map Styling (9 posts)

  1. mortonc
    Posted 1 year 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:


    Any ideas?


  2. Dylan Kuhn
    Plugin Author

    Posted 1 year ago #

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


    Here's an example:


  3. mortonc
    Posted 1 year ago #


    Where should that code be placed?

  4. mortonc
    Posted 1 year 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
    Plugin Author

    Posted 1 year ago #

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


  6. CuberToy
    Posted 1 year 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
    Posted 1 year ago #

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

  8. mdziedzic
    Posted 1 year 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
    Posted 10 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic