Style Google Maps : Make ur Map Look Cool

Vaishakh Thayyil

Google Maps

Monday, May 9, 2011

5 Comments

Tweet #newtonball with a screenshot of the level to win a suprize gift.
Checkout this cool game
Newton Ball in Playstore

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 .

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 .

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 :

<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 brooklyn = new google.maps.LatLng( 19.9455,72.8933);

function initialize() {

  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}
      ]
    }
  ];

  var mapOptions = {
    zoom:8,
    center: brooklyn,
    mapTypeControlOptions: {
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'bestfromgoogle']
    }
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  var styledMapOptions = {
      name: "RailwayIndia"
  }

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

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

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!!!!