Introduction
The chapter demonstrates about the Google Maps Layers and following are the concepts covered.
- Overview on Layers
- Fusion Table Layer
- Heatmap Layer
- Traffic Layer
- Transit Layer
- Bicycling Layer
Description
When an object containing one or more separate items, but manipulated into a single unit on a map is known as Layers. Simply layers are called as collection of different objects on the map.
The following are the Google Maps JavaScript API Layer types.
In order to add a layer to a map, need to call
- Fusion Table Layer
- Heatmap Layer
- Traffic Layer
- Transit Layer
- Bicycling Layer
setMap() object and to hide the layer pass the null value and call the setMap() object. Description
By using
FusionTablesLayer object user can make use of Fusion Tables provided by Google Maps API for creating a layer on a map.
Each row in Fusion table contains information about geographical data and a particular feature about different locations etc., by default Fusion Table is a database table, so that the users can create the Fusion table in Google console developer and create their own layers by calling the object.
To create own Fusion table, Go to Google Developers console -> Login with Google Account -> Go to create, update and delete Fusion Tables section -> Create a table by editing rows.
In order to add the created fusion table to a map, pass a query with the following properties.
- Select property The property provides the location information using column name as values.
- From property The property uses the Encrypted ID as a value.
Example
The below example demonstrate the sample code creating a Fusion layer, using the Fusion table Layer information which is in built already in Google Developers console by default.
[c]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables layers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.850033, lng: -87.6500523},
zoom: 11
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
}
});
layer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&signed_in=true" async defer>
</script>
</body>
</html>
[/c]
Description
The geographical point’s data intensity can be shown on a map using the Heatmap Layers. The areas with low intensity appears in green color and whereas the areas with high intensity appears in red color by default.
The Heatmap data can be used either client-side with the help of Heatmap layer or server-side with the help of Fusion Table.
Below are some of the differences between client-side and server-side for creating a Heatmap.
| Client-side | Server-side |
|---|---|
| Performance depends on the data points i.e, increase in datapoints increases the performance. | Reduce in Performance as the number of data points increases. |
| The Heatmap appearance cannot be customized. | The Heatmap appearance can be customized by changing the options density, radius, color etc. |
| zooming in will dissapear the Heatmap data. | The Heatmap data will not dissapear even when zoom levels are high. |
| cannot change the data at runtime and must be stored in a Fusion Table. | Data can be changed at runtime and can be stored in HTML file. |
Example
The example below demonstrate the code for creating a Heatmap on a map which is stored at client side.
[c]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps Layers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
background-color: #fff;
border: 1px solid #999;
left: 25%;
padding: 5px;
position: absolute;
top: 10px;
z-index: 5;
}
</style>
</head>
<body>
<div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map"></div>
<script>
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 17.3700, lng: 78.4800},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
heatmap = new google.maps.visualization.HeatmapLayer({
data: getPoints(),
map: map
});
}
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
function changeRadius() {
heatmap.set('radius', heatmap.get('radius') ? null : 20);
}
function changeOpacity() {
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}
// Heatmap data: 100 Points
function getPoints() {
return [
new google.maps.LatLng(17.3710, 78.4850),
new google.maps.LatLng(17.3730, 78.4900),
new google.maps.LatLng(17.3750, 78.5000),
new google.maps.LatLng(17.3770, 78.5150),
new google.maps.LatLng(17.3790, 78.5200),
new google.maps.LatLng(17.3810, 78.5300),
new google.maps.LatLng(17.3830, 78.5350),
new google.maps.LatLng(17.3840, 78.5400),
new google.maps.LatLng(17.3865, 78.5500),
new google.maps.LatLng(17.3875, 78.5800),
new google.maps.LatLng(17.3880, 78.5850),
new google.maps.LatLng(17.3890, 78.5900),
new google.maps.LatLng(17.3900, 78.6200),
new google.maps.LatLng(17.3910, 78.6500),
new google.maps.LatLng(17.3930, 78.6800),
new google.maps.LatLng(17.3940, 78.6700),
new google.maps.LatLng(17.3956, 78.7000),
new google.maps.LatLng(17.3980, 78.7100),
new google.maps.LatLng(17.3990, 78.7300),
new google.maps.LatLng(17.4000, 78.7540),
new google.maps.LatLng(17.4020, 78.7600),
new google.maps.LatLng(17.4040, 78.7750),
new google.maps.LatLng(17.4060, 78.7810),
new google.maps.LatLng(17.4080, 78.7850),
new google.maps.LatLng(17.4090, 78.7875),
new google.maps.LatLng(17.4110, 78.7900),
new google.maps.LatLng(17.4330, 78.7950),
new google.maps.LatLng(17.4400, 78.7990),
new google.maps.LatLng(17.4500, 78.8110),
new google.maps.LatLng(17.4550, 78.8400),
new google.maps.LatLng(17.4600, 78.8550),
new google.maps.LatLng(17.4640, 78.8560),
new google.maps.LatLng(17.4700, 78.8610),
new google.maps.LatLng(17.4800, 78.8650),
new google.maps.LatLng(17.4850, 78.8700),
new google.maps.LatLng(17.4900, 78.8800),
new google.maps.LatLng(17.6000, 78.8890),
new google.maps.LatLng(17.6500, 78.8900),
new google.maps.LatLng(17.6550, 78.9000),
new google.maps.LatLng(17.6660, 78.9110),
new google.maps.LatLng(17.6700, 78.11000),
new google.maps.LatLng(17.6800, 78.11200),
new google.maps.LatLng(17.6850, 78.11500),
new google.maps.LatLng(17.6855, 78.11200),
new google.maps.LatLng(17.6900, 78.11250),
new google.maps.LatLng(17.6985, 78.11350),
new google.maps.LatLng(17.8000, 78.11420),
new google.maps.LatLng(17.8220, 78.11450),
new google.maps.LatLng(17.8440, 78.11500),
new google.maps.LatLng(17.8500, 78.11600),
new google.maps.LatLng(17.8600, 78.11650),
new google.maps.LatLng(17.9000, 78.11700),
new google.maps.LatLng(17.9110, 78.11720),
new google.maps.LatLng(17.9220, 78.11740),
new google.maps.LatLng(17.9350, 78.11820),
new google.maps.LatLng(17.9360, 78.11835),
new google.maps.LatLng(17.9440, 78.11850),
new google.maps.LatLng(17.9760, 78.11860),
new google.maps.LatLng(17.9890, 78.11870),
new google.maps.LatLng(17.9940, 78.11900),
new google.maps.LatLng(17.9990, 78.11910),
new google.maps.LatLng(17.10000, 78.11940),
new google.maps.LatLng(17.10300, 78.11960),
new google.maps.LatLng(17.10540, 78.11980),
new google.maps.LatLng(17.10290, 78.12000),
new google.maps.LatLng(17.10450, 78.12250),
new google.maps.LatLng(17.10650, 78.12400),
new google.maps.LatLng(17.10780, 78.12550),
new google.maps.LatLng(17.10800, 78.12600),
new google.maps.LatLng(17.10990, 78.12780),
new google.maps.LatLng(17.13000, 78.15100),
new google.maps.LatLng(17.13220, 78.15350),
new google.maps.LatLng(17.13300, 78.15355),
new google.maps.LatLng(17.13440, 78.15360),
new google.maps.LatLng(17.13550, 78.15465),
new google.maps.LatLng(17.13560, 78.15470),
new google.maps.LatLng(17.13585, 78.15480),
new google.maps.LatLng(17.13600, 78.15600),
new google.maps.LatLng(17.13700, 78.15650),
new google.maps.LatLng(17.13720, 78.15750),
new google.maps.LatLng(17.13740, 78.15760),
new google.maps.LatLng(17.13742, 78.15780),
new google.maps.LatLng(17.13750, 78.15800),
new google.maps.LatLng(17.13770, 78.15805),
new google.maps.LatLng(17.13800, 78.15830),
new google.maps.LatLng(17.13810, 78.15835),
new google.maps.LatLng(17.13830, 78.15860),
new google.maps.LatLng(17.13850, 78.15870),
new google.maps.LatLng(17.13860, 78.15875),
new google.maps.LatLng(17.13900, 78.15845),
new google.maps.LatLng(17.13940, 78.15860),
new google.maps.LatLng(17.13960, 78.15875),
new google.maps.LatLng(17.13980, 78.15895),
new google.maps.LatLng(17.14000, 78.15897),
new google.maps.LatLng(17.14200, 78.16000),
];
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&libraries=visualization&callback=initMap">
</script>
</body>
</html>
[/c]
Description
The Traffic Layers are used to display the real-time traffic information on a map by the user request.
Use the object
TrafficLayer for creating traffic information on a map.
Example
The example below demonstrate the code for creating a simple real-time traffic information on a map using Google Maps API.
[c]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Traffic layer</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 17.3700, lng: 78.4800}
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&signed_in=true" async defer>
</script>
</body>
</html>
[/c]
Description
The Transit Layer display the public transport information of the selected city on a map. Use the object
TransitLayer for creating and displaying the transit information.
Google Maps provide the transit information only for some available locations. User can ensure the availability of transit information for a particular city or location by checking the Google Maps Transit official site.
Click the link below to check the list of transit information of available cities.
https://www.google.com/landing/transit/cities. Example
The example below demonstrate the code for displaying the Transit Layer information of Hyderabad city on a map using the Google Maps Transit information.
[c]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Transit layer</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 17.3700, lng: 78.4800}
});
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&signed_in=true" async defer>
</script>
</body>
</html>
[/c]
Description
The Bicycling Layer display the information about the bicycle path for the selected region or a city.
Google Maps API provides the suggested bike routes and other information about the bike paths on a map by using the object
BicyclingLayer.
Example
The example below demonstrate the code for creating a Bicycling Layer for the given LatLng co-ordinates.
[c]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Bicycling layer</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 52.3167, lng: 5.5500}
});
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&signed_in=true" async defer>
</script>
</body>
</html>[/c]
Key Points
- By default most of the layer may not access by the individual objects but manipulate as a single unit.
- Five Fusion Table Layers can be added to a map using the Google Maps API.
- The lines, polygons and points are supported by Fusion Table Layers.
Programming
Tips
- Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
- Set the required Map Properties for better output.
- Make sure the latitude and longitudes of the required location mentioned to be correct.
- Create an own Fusion Table through Google developer console for creating own Fusion Layer Map.
- Make sure to check the availability of transit information for the selected location through Google Maps Transit official website before creating a Transit Layer map.