Thursday, 3 October 2013

How To Style Google Maps

Google Maps is one of the best services you can get from Google. It’s a free tool that allows you to easily embed interactive and information-rich maps on your website. However, one disadvantage that comes from using free services is that eventually they all look the same.
The good news is Google launched the API that controls the map styles. So, in this post, we will see how to use the API, and make your map be more distinctive.

Google Maps Library

The first thing that we need to do is to include the Google Maps JavaScript library inside the document’s <head> tag, so that we can use the API.
view plaincopy to clipboardprint?
  1. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>  

Google Maps Components

There are three components to style the Google Maps: the feautureTypes, the elementTypes, and the Sytlers.
featureTypes is used to select the geographical objects on the map, such as the road, the water, and the parks, so it basically works like the CSS selectors. For your convenience, we have listed a few featureTypes that we can use to control the map.
FeatureTypesDescription
waterSelect all the water objects on the map including the sea, the lake and the river.
roadSelect all the roads on the map.
landscapeSelect the landscapes on the map.
poiSelect the point of interests, areas like schools, business districts, and parks.
transitSelect all the public transit like bus stations, the train stations and the airports.
administrativeSelect the administrative areas.
For more, you can head over to the following API reference: Google Maps feature type specification.
elementTypes is used to target the element that is part of the geographical objects, such as the object shape, the fill, the stroke, and the object labels.
stylers is an array of properties to adjust the object colors and its visibility. Google Maps accepts HSL (Hue, Saturation, Lightness) and Hexadecimal for the color format.

Basic Usage

First of all, we need to add a <div> element that is assigned with an id to contain the map.
view plaincopy to clipboardprint?
  1. <div id="surabaya"></div>  
The styles in Google Maps are declared with JavaScript objects. So, all the styles are nested under the <script> tag – this is the JavaScript 101. Additionally, you can place the scripts before the body close tag, or at the head tag with the window.onload function, like so.
view plaincopy to clipboardprint?
  1. window.onload = function () {  
  2.     // add the scripts here  
  3. }  
Create a variable to contain the map style rules. In this case, I would like to name it as styles.
view plaincopy to clipboardprint?
  1. window.onload = function () {  
  2.     var styles = [  
  3.         // we will add the style rules here.  
  4.     ];  
  5. };  
Then, display the map to the <div> container with the following functions.
view plaincopy to clipboardprint?
  1. window.onload = function () {  
  2.     var styles = [  
  3.         // we will add the style rules here.  
  4.     ];  
  5.     var options = {  
  6.     mapTypeControlOptions: {  
  7.         mapTypeIds: ['Styled']  
  8.     },  
  9.         center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509),  
  10.         zoom: 16,  
  11.         disableDefaultUI: true,   
  12.         mapTypeId: 'Styled'  
  13.     };  
  14.     var div = document.getElementById('surabaya');  
  15.     var map = new google.maps.Map(div, options);  
  16.     var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });  
  17.     map.mapTypes.set('Styled', styledMapType);  
  18. };  
At this point, the map should have appeared on your page, as follows.
Check out: Getting Started with Google Maps JavaScript API
In this example, I would like to change the color of the water. To do so, we can write the style rules in this way, within the styles variable.
view plaincopy to clipboardprint?
  1. var styles = [  
  2.     {  
  3.         featureType: 'water',  
  4.         elementType: 'geometry.fill',  
  5.         stylers: [  
  6.             { color: '#adc9b8' }  
  7.         ]  
  8.     }  
  9. ];  
The code above changes the fill color of the water element on the map to color #adc9b8, and here how it turns out.
Next, let’s change the landscape’s color, and this time we will use the HSL color format so that we can adjust the color lightness, like so.
view plaincopy to clipboardprint?
  1. var styles = [  
  2.     {  
  3.         featureType: 'water',  
  4.         elementType: 'geometry.fill',  
  5.         stylers: [  
  6.             { color: '#adc9b8' }  
  7.         ]  
  8.     },{  
  9.         featureType: 'landscape.natural',  
  10.         elementType: 'all',  
  11.         stylers: [  
  12.             { hue: '#809f80' },  
  13.             { lightness: -35 }  
  14.         ]  
  15.     }  
  16. ];  
This code addition gives us the following result.
Furthermore, these are the style rules for several other objects on the map.
view plaincopy to clipboardprint?
  1. {  
  2.     featureType: 'poi',  
  3.     elementType: 'geometry',  
  4.     stylers: [  
  5.         { hue: '#f9e0b7' },  
  6.         { lightness: 30 }  
  7.     ]  
  8. },{  
  9.     featureType: 'road',  
  10.     elementType: 'geometry',  
  11.     stylers: [  
  12.         { hue: '#d5c18c' },  
  13.         { lightness: 14 }  
  14.     ]  
  15. },{  
  16.     featureType: 'road.local',  
  17.     elementType: 'all',  
  18.     stylers: [  
  19.         { hue: '#ffd7a6' },  
  20.         { saturation: 100 },  
  21.         { lightness: -12 }  
  22.     ]  
  23. }  
Here is how the final look of the map.

You can head over to the demo page to see the final result in detail.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)