Google Maps API - SPLessons

Chapter 11

Google Maps Layers

Google Maps Layers

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

Overview on Layers

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 setMap() object and to hide the layer pass the null value and call the setMap() object.

Fusion Table Layer

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.

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.

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

Heatmap Layer

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.

The example below demonstrate the code for creating a Heatmap on a map which is stored at client side.

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

Traffic Layer

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.

The example below demonstrate the code for creating a simple real-time traffic information on a map using Google Maps API.

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

Transit Layer

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.

The example below demonstrate the code for displaying the Transit Layer information of Hyderabad city on a map using the Google Maps Transit information.

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

Bicycling Layer

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.

The example below demonstrate the code for creating a Bicycling Layer for the given LatLng co-ordinates.

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

Summary

  • 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.

  • 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.