Styling Google Maps

August 29, 2011

It seems to be a little known fact that you can add custom styles to Google Maps using the Javascript API.

It's really not that complex and we use it often for client sites.

First thing to do is create the JSON to use for the style. You can use this wizard, it's a great tool for that.

Then you use the JSON in your Javascript like so:

// your JSON
var mapStyle = [
  {
      featureType: "landscape",
      elementType: "all",
      stylers: [
      { hue: "#ff4d00" },
      { lightness: -72 },
      { saturation: -74 }
    ]
  }
];

// usual Google Maps code, plus styling
var map;

$(function () {
    var mapOptions = {
        zoom: 12,
        mapTypeId: 'MapStyle',
        mapTypeControlOptions: {
            mapTypeIds: ['MapStyle', google.maps.MapTypeId.SATELLITE]
        }
    };

    var styledMapOptions = { name: "Map" };

    map = new google.maps.Map(document.getElementById("styled-maps-example-1"), mapOptions);
    map.setCenter(new google.maps.LatLng(46.8,-71.25));
    var mapType = new google.maps.StyledMapType(mapStyle, styledMapOptions);
    map.mapTypes.set('MapStyle', mapType);
    map.setMapTypeId('MapStyle');
});

It's even in the docs. I don't see any reason why there's so little use of this feature.