Style your Google maps with JSON

Customize the colors of google maps api with cssHow about getting the possibility to style the map from the Google Map API in any way you like.

For basic usage, the standard colors from Google Maps are fine, but if you have a specific map where you want to highlight specific types of data – eg. highways, or just want to customize the look and feel of the map, you now have the chance with the new styling possibilities in V3 of the Google Maps API.

Google Map styling possibilitie

I first saw the possibility to customize the look and feel of maps in the CloudMade map API. Even though customization sounds like a nice-to-have feature – it can be very useful to increase focus on specific data in the map. The good news is that customization of the maps now also are possible with Google Maps API.

You can currently add customized styles to the following data types:

ConstantDescription
administrativeApply the rule to administrative areas.
administrative.countryApply the rule to countries.
administrative.land_parcelApply the rule to land parcels.
administrative.localityApply the rule to localities.
administrative.neighborhoodApply the rule to neighborhoods.
administrative.provinceApply the rule to provinces.
allApply the rule to all selector types.
landscapeApply the rule to landscapes.
landscape.man_madeApply the rule to man made structures.
landscape.naturalApply the rule to natural features.
poiApply the rule to points of interest.
poi.attractionApply the rule to attractions for tourists.
poi.businessApply the rule to businesses.
poi.governmentApply the rule to government buildings.
poi.medicalApply the rule to emergency services (hospitals, pharmacies, police, doctors, etc).
poi.parkApply the rule to parks.
poi.place_of_worshipApply the rule to places of worship, such as church, temple, or mosque.
poi.schoolApply the rule to schools.
poi.sports_complexApply the rule to sports complexes.
roadApply the rule to all roads.
road.arterialApply the rule to arterial roads.
road.highwayApply the rule to highways.
road.localApply the rule to local roads.
transitApply the rule to all transit stations and lines.
transit.lineApply the rule to transit lines.
transit.stationApply the rule to all transit stations.
transit.station.airportApply the rule to airports.
transit.station.busApply the rule to bus stops.
transit.station.railApply the rule to rail stations.
waterApply the rule to bodies of water.

As you can see, there is plenty of tweaking possibilities.

How to style Google Maps

When you want to style your map, you need to insert a JSON object that contains map style definition into your normal Google Map definition on your site.

<html>
<head>
<title>Google Maps JavaScript API v3 Example: Styled MapTypes</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>

var map;
var london = new google.maps.LatLng(51.498303,-0.129805);

function initialize() {

 var stylez = [ {
 featureType: "transit.station", elementType: "all", stylers: [ { visibility: "on" }, { hue: "#1100ff" } ] },{
 featureType: "water", elementType: "all", stylers: [ { visibility: "on" }, { hue: "#0011ff" } ] },{
 featureType: "road.highway", elementType: "all", stylers: [ { visibility: "on" }, { hue: "#ff7700" } ] },{
 featureType: "landscape.man_made", elementType: "all", stylers: [ { visibility: "on" }, { hue: "#00a1ff" }, { saturation: 66 }, { lightness: 0 } ] },{
 featureType: "road.local", elementType: "all", stylers: [ { hue: "#08ff00" }, { saturation: 51 } ] },{
 featureType: "all", elementType: "all", stylers: [ ] } ];

 var mapOptions = {
 zoom: 14,
 center: london
 };

 map = new google.maps.Map(document.getElementById("map_canvas"),
 mapOptions);

 var styledMapOptions = {
 map: map,
 name: "tips4phpHip-Hop"
 }

 var testmap =  new google.maps.StyledMapType(stylez,styledMapOptions);

 map.mapTypes.set('tips4php', testmap);
 map.setMapTypeId('tips4php');
}
</script>
</head>
<body onload="initialize()">
 <div id="map_canvas" style="width: 400px; height: 300px;">map div</div>
</body>
</html>

The code creates the following map of central London where:

  • Public transportation stops has been highlighted
  • Water in a stronger blue color
  • Land in a light blue color
  • Stronger road colors

Google map api sample with customized colors

See example here

Creating the styling JSON can be a little tricky, but Google has created a great tool where you can easily modify the map colors, and copy the JSON created to your script.

Google map JSON style editor

The UI is not as intuitive as CloudMade maps, but it’s a great help

Conclusion

Customization of map colors is a great new feature in Google Map API v3. Adding colors defines as a JSON object including hue, saturation and lightness is quite complicated, however with the Google Maps API Styled Map Wizard it can be done without too much trouble.

My recommendation is to try it out and play a little around with the possibilities.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

3 Replies to Style your Google maps with JSON

  1. Vinay says:

    Very good example on styling the Google Maps .
    I have created a “Railways” Map using this
    feature , it will be an extra resource for your
    readers check this out for more on styling Google
    Maps http://bestfromgoogle.blogspot.com/2011/05/style-google-maps-make-ur-map-look-cool.html

  2. Ian Douglas says:

    I’m trying to style a Google Map to use in WordPress. I’m using the google tool you mention. It outputs a few lines of “JSON”, but I’m afraid I really don’t know what to do with this code. I’m using Google Maps via the Shortcodes Ultimate plugin. I’ve looked everywhere for more detailed information on how to do this in WordPress, but I can’t find. Could you explain more, or write me directly? Thanks

Trackbacks for this post

  1. Stylizing Google Maps | GIS Lounge

Comments are now closed for this article.