Introduction
The chapter demonstrates about the Google Maps JavaScript API Overlays and following are the topics covered.
- Overlay
- Symbols
- Markers
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
- Markers
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.anchorUsed to set the position of a symbol with respect to the polyline or marker.fillcolorUsed to fill the symbol’s color, by default the color is black.fillOpacityThe symbol’s opacity is defined byfillOpacityand the values range from 0.0 to 1.0 and the default value is 0.0.pathThe shapes of the symbols are defined using the path property. User can usegoogle.maps.symbolpathor useSVG path notationfor customizing.scaleUsed to scale the size of symbol and by default the scale is 1.rotationUsed to rotate the symbol in degrees of clockwise direction and by default the symbol has a 0 rotation.strokeColorThe outline color of a symbol is defined using the propertystrokecolorand by default the color is black. For polyline symbol the default color depends up on polyline.strokeOpacityThe symbol’s stroke relative opacity is defined using thestrokeOpacityby default it is 1.0 and range from 0.0 to 1.0.strokeWeightThe weight of the symbol can be defined using the propertystrokeweight.
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 |
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. Example
The example below demonstrate displaying the vector-based icon on a marker.
[c]
<!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>
[/c]
Description
User can Animate the symbols on the Maps using the
window.setInteval() function in Google Maps JavaScript API applications. Example
Example below demonstrate the Animation of symbols in Google Maps API.
[c]
<!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>
[/c]
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. 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.
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.