Style Google Maps : Make ur Map Look Cool Monday, May 9, 2011 In this tutorials on Google Maps we will show to you how you can Cutomize the Google Maps to make it blend with your websites templates .  So for this the three things we are going to deal with is a) mapTypeIds     This is used to specify the differenet map Types we     want in our map .If we donot set this explicitly it will     render all three type(RoadMap ,Satellite ,Hybrid)     by default. In this tutorial we will be creating and     using our Customized Map named "RailwayIndia". b)MapTypeStyle    This will be used to define where and how we will    be applying our styles on Google Maps . It has 3    attributes     1) featureType : It defines on which map element     we will be applying your styles .It was a number     of values which we will learn shortly like transit,     administrative etc .Here's the full list administrative Apply the rule to administrative areas. administrative.country Apply the rule to countries. administrative.land_parcel Apply the rule to land parcels. administrative.locality Apply the rule to localities. administrative.neighborhood Apply the rule to neighborhoods. administrative.province Apply the rule to provinces. all Apply the rule to all selector types. landscape Apply the rule to landscapes. landscape.man_made Apply the rule to man made structures. landscape.natural Apply the rule to natural features. poi Apply the rule to points of interest. poi.attraction Apply the rule to attractions for tourists. poi.business Apply the rule to businesses. poi.government Apply the rule to government buildings. poi.medical Apply the rule to emergency services  (hospitals, pharmacies, police, doctors, etc). poi.park Apply the rule to parks. poi.place_of_worship Apply the rule to places of worship, such as church, temple, or mosque. poi.school Apply the rule to schools. poi.sports_complex Apply the rule to sports complexes. road Apply the rule to all roads. road.arterial Apply the rule to arterial roads. road.highway Apply the rule to highways. road.local Apply the rule to local roads. transit Apply the rule to all transit stations and lines. transit.line Apply the rule to transit lines. transit.station Apply the rule to all transit stations. transit.station.airport Apply the rule to airports. transit.station.bus Apply the rule to bus stops. transit.station.rail Apply the rule to rail stations. water Apply the rule to bodies of water.              2)ElementType : It basically takes two values     a)geometry  :- whether you want to apply the        style to the geometry of the map element .        For eg if you have selected road as a feature        type you can apply specific styles and colors        to the road shapes .     b) label :- Applying style to the  labels .With         reference to the above example , customizing the         style of Road Names .     c) all : style will be applied to both              3)  stylers :         This will define the style of the featureType         you have selected  . Below I have listed the         gamma number Gamma. Modifies the gamma by raising the lightness to the  given power. Valid values:  Floating point numbers, [0.01, 10], with 1.0 representing no  change. hue string Sets the hue of the feature to match the hue of the color supplied . Note that the saturation and lightness of the feature is conserved,  which means that the feature will not match the color supplied  exactly. Valid values: An RGB hex string, i.e. '#ff0000'. invert_lightness boolean Inverts lightness. A value of true will invert the lightness of the  feature while preserving the hue and saturation. lightness number Lightness. Shifts lightness of colors by a percentage of the  original value if decreasing and a percentage of the remaining  value if increasing. Valid values: [-100, 100]. saturation number Saturation. Shifts the saturation of colors by a percentage of  the original value if decreasing and a percentage of the remaining  value if increasing. Valid values: [-100, 100]. visibility string Visibility: Valid values: 'on', 'off' or 'simplifed'.     So lets start with the coding : First of all we will decide what we want to customize and how ? In this tutorial we will be creating a customized Indian Railways Maps . So we have selected featureType as transit.railway for this and we have decided to use invert_lightness feature for landscape so that it gives  better view of the Railways . ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 var stylez = [    {      featureType: "transit.station.rail",      elementType: "geometry",      stylers: [        { hue: "#00ff00" },        { saturation:100 }      ]    },    {      featureType: "transit.station.rail",      elementType: "labels",      stylers: [        { hue: "#ffff00" },        { saturation:50 }      ]    },    {      featureType: "landscape",      elementType: "geometry",      stylers: [        { invert_lightness:true}      ]    }  ]; The next step is to create a mapType "RailwayIndia" which is the name for our customized Google Map . ? 1 2 3 4 5 6 7 8 9 var styledMapOptions = {     name: "RailwayIndia" }   var jayzMapType = new google.maps.StyledMapType(     stylez, styledMapOptions);   map.mapTypes.set('bestfromgoogle', jayzMapType); map.setMapTypeId('bestfromgoogle'); So this will give the map a name "RailwayIndia" which will come in the top of the Google Maps . The complete code is as follows : ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62  

map div

The customized Google Map should look like this now . If you have found this article helpful or have any queries you can do so by leaving a comment on this article . Happy Coding!!!! Category: Google Maps About Author: The Author is a last year B.E student from KJ Somiaya College of Engineering(Mumbai) and is currently employed with Infosys . If you enjoyed this article, subscribe to receive more just like it. Subscribe via RSS Feed Privacy guaranteed. We'll never share your info. Related posts: Add Local Language Support to Google Maps Changing Default Google Map Marker Free Geocode Address Database Style Google Maps : Make ur Map Look Cool Add Local Search to Google Maps 4 comments Ashis says: June 12, 2011 2:57 PM I put this information in my blog too. Ellie K says: July 22, 2011 12:44 AM This is a GREAT tutorial! You did an excellent job. I have a Google hobby blog, and was reading the Kotke blog and then Programmable Web, where I saw your link in the comments. That is how I arrived here. I'm just about to publish a little post about the Google Maps without Maps, with reference to Google Maps Styles, and will mention your blog (I'm on wordpress dot com, so I'll do a trackback to you). One question though: Google is deprecating so many of its API's between now and the end of 2011. Will this affect usage of Google Maps and styles? Or only for serious developers, not for casual users? By casual users, I mean people like me, who include Google maps in my blog entries using iframes based on Google Maps directions for embedding. Thank you again! Vaishakh Thayyil says: July 22, 2011 4:00 AM First of all thankyou Elle for your comments . About your questions you can definitely use this in your blog , and Elle don't worry about depreciation , this tutorials is made with the latest version of Google Map i.e v3 and Google still supports the old versions of Google Maps . New features are still being added in Google Maps v3 ,you can check the Google Maps section on this blog and who knows you may find out something to integrate into your blog . If you liked this artcile you can like us on Facebook, or subscribe to our RSS feeds. Anonymous says: March 19, 2012 5:24 PM I'm having trouble embedding this code into my site. All I want is to create a greyscale map, with saturation at -98 and gamma at .69 - can you advise?