Monday, May 9, 2011

Style Google Maps : Make ur Map Look Cool



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

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.
   
     


   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
       

gammanumberGamma. 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.
huestringSets 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_lightnessbooleanInverts lightness. A value of true will invert the lightness of the
 feature while preserving the hue and saturation.
lightnessnumberLightness. 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].
saturationnumberSaturation. 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].
visibilitystringVisibility: 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!!!!

5 comments

I put this information in my blog too.

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!

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.

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?

nice article..

I have found another example for Styled Google Maps Example visit http://www.etechpulse.com/2013/09/styled-google-maps-example.html