Google Maps Overlays

shape Introduction

The chapter demonstrates about the Google Maps JavaScript API Overlays and following are the topics covered.

  • Overlay
  • Symbols
  • Markers

Overlay

shape Description

The Google Maps API support Overlays by which the objects given on the map depends on latitude and longitude co-ordinates. So that, when the user zoom or drag the map the objects move.

The objects can be added to indicate areas, designation points, collection of objects etc. on the map.

The following are some of the types of Google Maps API which can be added programmatically.

Symbols

shape Description

The path of a symbol is defined by SVG path notation in Google Maps API, whereas the path was the only required property for using symbols.
Users can also customize the properties like weight, color of a symbol using symbol objects.
The following are the properties of Symbol.

Predefined symbols

shape Description

User can use some predefined in-built symbols provided by Google Maps JavaScript API, which can be added to the polylines or markers using the class SymbolPath class.

The fill or stroke of a pre-defined symbols can be modified using the symbol default options. The Google Maps API uses the following predefined symbols.

Symbols SymbolPaths
Backward-point arrow(closed on all sides) google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward-point arrow(closed on all sides) google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Circle google.maps.SymbolPath.CIRCLE
Backward-point arrow(open on one side) google.maps.SymbolePath.BACKWARD_OPEN_ARROW
Forward-point arrow(open on one side) google.maps.SymbolPath.FORWARD_OPEN_ARROW

Adding symbol to a Marker

shape Description

To add a symbol object use the marker’s icon property with desired path. The example below explain in detail about adding a symbol.

shape Example

The example below demonstrate displaying the vector-based icon on a marker.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Predefined Marker Symbols</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: 4,
    center: {lat: 17.3700, lng: 78.4800}
  });
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&signed_in=true" async defer>
    </script>
  </body>
</html>

Animating the Symbols

shape Description

User can Animate the symbols on the Maps using the window.setInteval() function in Google Maps JavaScript API applications.

shape Example

Example below demonstrate the Animation of symbols in Google Maps API.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Animating Symbols</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
// This example adds an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 21.0000, lng: 78.0000},
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 6,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 17.3700, lng: 78.4800}, {lat: 18.9750, lng: 72.8258}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateFORWARD_CLOSED_ARROW(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateFORWARD_CLOSED_ARROW(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&signed_in=true" async defer>
    </script>
  </body>
</html>

Markers

shape Description

To identify the location on a map, markers are used in Google Maps. By default, the Google Maps JavaScript API uses a standard images as markers.

Google provides the custom icon options to users, so that a custom icon can be created with in the constructor called markers or by calling setIcon() on marker.

For more information about Markers checkout Google Maps – Markers.

Summary

shape Key points

  • Objects on the maps depends on Latitude and Longitude, so when the user zoom or drag on the map the objects moves.
  • Google Maps provide some pre-defined inbuilt symbols.

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