ABSTRACT

This paper gives a perspective about how Google Maps, one of the world’s most influential
application works. Google Maps was initially coded in C++ programming language by its
founders - Lars and Jens Eilstrup Rasmussen. Formerly it was named ‘Where 2 Technologies’,
which was later acquired by Google Inc. in 2004, which renamed this web-application to
Google Maps. Earlier it had limited features restricted to navigation, but today it provides
overwhelming features like street-view, ETA and other such intriguing features.
It gives an overview about the algorithms and procedures employed by Google Maps to carry
out analysis and enable users to carry out desired operations. Various features provided by
Google Maps are portrayed in this paper. It describes the algorithms and procedures used by
Google Maps to find the shortest path, locate one’s position, geocoding and other such
elegant features it provides its users.
Keywords
Heuristics, A* algorithm, Dijkstra’s algorithm, Street View, Rosette, Optical flow, Ceres Solver,
Geocoding, Triangulation, Trilateration, WAAS, GNSS, Geo-Positioning System [GPS].

2 | Page
 TableofContents

Abstract .................................................................................................................... ii

Table of Contents ...................................................................................................... iii

1. GOOGLE MAPS – GETTING STARTED .................................................................................1

Introduction ...............................................................................................................1

What are Google Maps? .............................................................................................1

Steps to Load the Map on a Webpage .........................................................................1

2. GOOGLE MAPS – TYPES ....................................................................................................5

Types of Maps ............................................................................................................5

Roadmap ...................................................................................................................5

Satellite......................................................................................................................6

Hybrid ........................................................................................................................ 7

Terrain .......................................................................................................................9

3. GOOGLE MAPS – ZOOM .................................................................................................11

Increase/Decrease the Zoom Value ........................................................................... 11

Example : Zoom 6 ..................................................................................................... 11

Example : Zoom 10 ................................................................................................... 12

4. GOOGLE MAPS – LOCALIZATION.....................................................................................14

Localizing a Map ....................................................................................................... 14

5. GOOGLE MAPS – UI CONTROLS ......................................................................................16

Default Controls ....................................................................................................... 16

Disabling the UI Default Controls .............................................................................. 17

3 | Page
 Enabling/Disabling All the Controls ........................................................................... 18

Control Options ........................................................................................................ 20

Control Positioning ................................................................................................... 22

6. GOOGLE MAPS – MARKERS ............................................................................................25

Adding a Simple Marker ........................................................................................... 25

Animating the Marker .............................................................................................. 26

Customizing the Marker ........................................................................................... 28

Removing the Marker ............................................................................................... 29

7. GOOGLE MAPS – SHAPES ...............................................................................................32

Polylines .................................................................................................................. 32

Polygons .................................................................................................................. 33

Rectangles ................................................................................................................ 35

Circles ...................................................................................................................... 37

8. GOOGLE MAPS – INFO WINDOW....................................................................................40

Adding a Window ..................................................................................................... 40

9. GOOGLE MAPS – SYMBOLS ............................................................................................42

Adding a Symbol ...................................................................................................... 42

Animating the Symbol .............................................................................................. 44

10. GOOGLE MAPS – EVENTS ...............................................................................................46

Adding an Event Listener .......................................................................................... 46

Opening an Info Window on Click ............................................................................. 47

Removing the Listener .............................................................................................. 49

4 | Page
 Google Maps

1.

GOOGLE MAPS – GETTING STARTED

INTRODUCTION
Google Maps is one of the most sought after innovation in the history of technology. The advent of
this feature by the tech- giant Google Inc. Google Map enables people to navigate and find the
shortest and most convenient route to their desired destination. According to a recent survey,
Google Maps has acquired almost 64 million users. Moreover, it has included new features like
street-view, location of hospitals, cafes, police-stations and many more helpful features. The
algorithms, techniques and technology used by Google Maps is cutting-edge and highly advanced.
The team of engineers at Google, preserve and analyze myriad datasets including historic and real-
time data, which is what makes Google Maps so progressive and accurate. The prediction models
continuous valued functions i.e., predicts new values. Also ML models can be used and applied on
traditional computing techniques to improve the existing accuracies [1-5].

WhatareGoogleMaps?
Google Maps is a web mapping service developed by Google. It offers
satellite imagery, aerial photography, street maps, and 360° interactive
panoramic views of streets (Street View), real-time traffic conditions,
and route planning for traveling by foot, car, bicycle, or public
transportation.
Users can access Google Maps through a web browser on a computer or
through the Google Maps mobile app on smartphones and tablets.
It is a free web mapping service by Google that provides various types of
geographical information. Using Google Maps, one can.
 Search for places or get directions from one place to another.

 View and navigate through horizontal and vertical panoramic

street level images of various cities around the world.

 Get specific information like traffic at a particular point.

Google Maps provides an API using which you can customize the maps
and the information displayed on them. This chapter explains how to
load a simple Google Map on your web page using HTML and JavaScript.

5 | Page
 1. GOOGLE MAPS: ALGORITHMS AND TECHNIQUES
1.1 Dijikstra’s Algorithm
Google maps employs Graph data structures for calculation of the shortest path from the source
(point A) to the destination (point B). Graph data structure comprises of various nodes and multiple
edges connecting these nodes. Dijkstra’s algorithm is an effective and proficient algorithm
proposed by Edsger.W. Dijkstra to navigate the shortest distance and path to reach a given
destination. The nodes of the graph are connected by weighted edges, which represent the
distance to be traversed to reach there. Thus Dijkstra
Devised an algorithm to find the shortest route from the source to the destination.

Google maps deals with a mammoth of data, thus the number of nodes in the graph are myriad.
Thus, graph algorithms like Dijkstra’s algorithm may fail due to the increased time and space
complexity. The drastic increase in the size of the graph limits the efficiency of the algorithm.
Heuristic algorithms like A* algortihm prove to be implementable.
A* is similar to Dijkstra’s algorithm, which uses a heurisitc function to navigate a better and more
efficient path. A* algorithm assigns higher priority to the nodes which are supposed to be better
(checks for parameters like time requirement, distance and other such parameters) than the others,
while Dijkstra explores all the nodes. Therefore it is meant to be faster than Dijkstra’s algorithm,
even if the memory requirement and operations per node are more, since it explores a lot less
nodes and the gain is good in any case. [7]

6 | Page
1.2 A* (A-star) Algorithm
A* algorithm is a flexible, more efficient and cutting-edge algorithm which Google Maps currently
utilises to find the shortest path between a given source and destination. It has a wider range of
contexts hence, it can deal with larger graphs which is preferable over Dijkstra’s algorithm. A* is like
Greedy Best-First-Search. A* algorithm is widely used since its mechanism involves combining the
pieces of information that Dijkstra algorithm uses (It favors the vertices close to the source) and
information that Greedy Best-First-Search uses (choosing nodes close to the goal).[8]
One of the difference between A* and Dijkstra’s algorithm is that A* algorithm, being a heuristic
algorithm, has two cost functions:
G(x):- The actual cost to reach a vertex (same applies to Dijkstra)
H(x):- Approximate cost to reach goal node from node n. (This is the heuristic part of the cost
function)
F(x):- T o t a l estimated cost of each node
The cost calculated by A* algorithm shouldn’t be overestimated, since it is a heuristic algorithm.
Hence, the actual cost to reach the destination node, from any given node n should be either greater
than or equal to h(x). This is called Admissible Heuristic.
Hence, one can represent the estimated total cost of each node by:
F (x) = g (x) + h (x).
A node is expanded by A* search, only if it is considered to be promising. This algorithm focuses
solely on reaching the goal node from the node which is currently under consideration. It does not
try to reach other nodes.
Thus, if the heuristic function taken into consideration approximates the future cost accurately, then
one needs to explore considerably less nodes as compared to Dijkstra’s algorithm. [9]
A* algorithm terminates when the destination node has been reached ensuring that the total cost of
reaching the destination node is the minimum compared to all the other paths. It can also terminate
if the destination node has not been reached despite all the nodes being explored. Unlike, Dijkstra’s
algorithm, it does not explore all nodes possible, thus A* proves to be more proficient.

Owing to the high accuracy, flexibility, ability to deal with mammoth graphs and its stark
advantages over Dijkstra’s algorithm, Google Maps has shifted to deploying A* algorithm for
obtaining the shortest path between the source and destination.
 STREET VIEW – GOOGLE MAPS
In 2007, the Google Maps team introduced an outstanding feature called Street View. This brilliant
innovation proved to be a milestone in the history of navigation and GPS. Street View, the newly
introduced feature, provided a 3- dimensional, HD, Panoramic view of many neighborhoods, streets,
avenues, and other such areas merely from one's mobile phone or computer. Surprisingly, these
images are manually taken by Google Maps team using a car specially fitted with multi-camera rig
and other necessary equipment’s for actually taking pictures of the neighborhoods they drive by.
The following images depict the cars and cameras used to generate the street view.

Fig.1. Cars and Camera Rig used.

The development and creation of these panoramic views is a strenuous task, involving image
capturing from multi-camera setup called Rosette. Subsequently, the manually captured images are
blended and stitched using various computer editing and blending algorithms and software’s.
However, impediments like parallax, miscaliberation of the Rosette camera geometry, time
difference can destroy or adversely affect the image-processing and blending.
Despite such cautious procedure/steps, visible seams in overlap-region can still occur. In order to
provide more seamless images and to overcome the above drawbacks, the team at Google has
developed a new algorithm based on Optical-Flow. The concept behind this is to warp/adjust each
image in a way such that the content aligns with the region of overlap. To eliminate/avoid any
chance of distortion or drawback the process is to be carried out meticulously. A robust and potent
approach is required to counteract adverse lighting conditions, varying scene geometry, calibration
and parallax distortion, and other inevitable conditions.[10]

Fig.2. Parallax distortion due to miscalibration.

Moreover, the images captured by rosettes are aligned and adjusted corresponding to all the points
from the overlap region. These images are then stitched using software’s to obtain desired
panoramic, 3-D views. To generate the final results, the warping is formulated as a spline-based
flow field with spatial regularization. Google’s open source Ceres Solver is used to compute the
spline parameters.
Therefore, after carrying out such complicated procedures, the images can be corrected, aligned
and warped as pleased.
Google Maps' street-view feature is being drastically refined and remodeled since their team is
exploring more and new places every day. The expanse of street-view coverage is almost fully
completed in numerous developed countries and is dramatically increasing in the developing
countries. Statistically, the Government of India reported that 14 miles are being covered each day
by the Google Maps' Street View team. The implementation of such a 3-D, Panoramic feature which
enables the users to view and virtually travel along the extreme corners of the world is truly a
technological breakthrough.

Fig.3. Status of Street View compatibility in the world.

2. LOCATING THE POSITION (OF AN OBJECT, PERSON OR PLACE) USING GPS AND
GEOCODING:-
Global Position System (GPS) is an outstanding innovation used for tracking an object using
satellite systems currently present in the space. This type of tracking can be used for military as
well as civilian purposes. Google Maps uses the civil GPS tracking and locates people and places.
The tracking system used by the Global Positioning System is the GNSS network (Global Navigation
Satellite System Network). This system not only stores the location, but also has the memory to
store the speed, direction, time and other parameters.
The Global Positioning System comprises of 27 GPS satellites orbiting around the Earth, out of
which 24 are operational and 3 are spare (To be used in case of failure). These revolve around the
Earth each 12 hours and emit civilian and military navigation data signals, on two L-band
frequencies. These signal are emitted in space and are gathered by the GPS receiver. Five
monitoring stations along with four ground antennas comprise the control of the Global
Positioning System. These are located across the globe which gathers the data about the satellite's
position which is further relayed to the master control station at Schreiber Air Force Base in
Colorado, USA Passive tracking by GPS involves storage of the data obtained during tracking, while
in active tracking some information is relayed regularly through a modem within the GPS system
unit (2-way GPS) to a centralized database.
The location tracking is based on a mathematical principle called Trilateration. There are 2 types of
trilateration - 2-D trilateration and 3-D trilateration. This requires two parameters –
✔ First, the location of the place is required to be known, which will subsequently be traced by
at least 3 satellites. The range of these satellites should be able to cover the specific
position.
✔ Next, the distance between the object (e.g. a vehicle) and one of the satellites is required
to be known.
Hence, for this, a miniature receiver/device is installed on the vehicles/phones to capture the radio
(electro-magnetic signals) emitted by the satellite. This helps to compute the distance between
the vehicle and satellite as well as the satellite's location. Thus, by locking the signals onto 3
satellites, the location of the vehicle can be gauged by using Triangulation
Technique, which can be extended to the mathematical principle of Trilateration. To achieve 3-D
trilateration, one need to take consider spheres instead of two dimensional circles. Unlike 2-D
trilateration, the radii of the sphere is said to spread in all directions, thus forming imaginary 3-
dimensional spheres around a given point. Thus the intersection of these three sphere, gives the
location of the object. In case of 3-D trilateration, two intersection points are obtained because of
the 3 spheres. The Earth helps by eliminating one of the points by acting as the fourth sphere. This
enhances the search and makes it possible to locate the exact position of the given object, place or
person. [14]The concept of Trilateration is echoed better by the following diagrams:-
This is a system comprising of satellites as well as ground stations which works with GPS to refine
and improve the quality of the system and also helps in error detection and correction. A GPS
receiver is capable of gauging any given position accurately within three meters, with the assistance
of WAAS. It has been developed by the Federal Aviation Administration (FAA) and the Department
of Transport (DOT) to counteract the signal errors caused as a result of disturbances in the
ionosphere, time errors and satellite orbit errors. WAAS is essential for obtaining the knowledge
about the conditions of each satellite of the GPS network.

Fig.4. Three Dimensional Trilateration

Fig.5. Two Dimensional Trilateration

WAAS (Wide Area Augmentation System):-

With the help of the satellites, the receiver can now compute and detect the latitude, longitude and
altitude of the vehicle which are supposed to comprise the hypothetical geometrical co-ordinates of
the vehicle. Thus, assigning and accessing the following values is termed 'Geocoding', where the
location of
a particular object is accessed using a hypothetical grid system, and then locating/plotting the
specific co-ordinates (latitude, longitude, altitude) to obtain the required location of the object
on a given map.
Google Maps uses this algorithm of Global Positioning System to detect and locate places on
the map. Thus the signals obtained from satellites in space and other such ground networks,
towers and other such facilities help in accurately locating the position of an object, place or
person using algorithms like Triangulation, Trilateration and other such complex algorithms.
3. ESTIMATED TIME OF ARRIVAL (ETA):-
The most basic and important criterion for Google Maps to estimate the time taken to reach a
particular destination is based on the route taken to reach the given destination from the
source. This is calculated using the A-star (A*) algorithm, which helps in obtaining the shortest
route from the starting point to the desired destination. This would be the shortest path
recommended by Google Maps without taking into consideration the real-time traffic, which
was a major drawback. To overcome this drawback, Google collects continuous data from all
cellular devices on that particular way and other routes possible. Manipulating this data, the
average speed of any user can be determined and the shortest path can then be decided. A user
can find a route adding a few halts, avoid freeways, avoid bridges and choose a location
according to their desire, despite the shortest path recommended by Google Maps.
Before 2007, Google Maps was only able to calculate the estimated time of arrival (ETA) by
taking into consideration the distance between two given points and the average speed of the
object or person between the source and destination. The flaw with this was that a very
important criterion of traffic was overlooked. Today, Google Maps considers the current traffic
condition on the selected route, which often prove to increase the commute time. It provides
the user with two ETA – one is at the average optimal conditions and the other is under current
traffic conditions, which helps the user estimate the time required to reach any particular
destination.
A former Google engineer Richard Russell wrote, answering a question on Quora - “These things
range from official speed limits and recommended speeds, likely speed derived from road types,
historical average speed data over certain time periods (sometimes just averages, sometimes at
particular times of day), actual travel times from previous users and real-time traffic
information. They mix data from whichever sources they have and come up with the best
predictions they can make.”[17]
Moreover, the collection of the data like average speed of users travelling on the same paths,
officially recommended speeds, comparison between optimum average speed and the current
real-time speed due to traffic conditions help the engineers and analysts at Google to calculate
the estimated time of arrival (ETA) from point A to point B. Historic data also helps the
engineers analyze the current traffic scenarios at a certain point between two places, which
contribute towards the fluctuation of the ETA. As rightly stated by former Google engineer
Richard Russell, the companies who have the best, most accurate and highly advanced real-
time data usage tend to come up with best forecasts in the medium and long term. [18]

1
Thus, in the modern time, myriad factors apart from average speed of the user on a specific
route, the shortest path and distance between two points have to be taken into consideration
in order to determine and compute the estimated time of arrival.
However, Google Maps cannot take into consideration a user’s personal speed [16], but can
only determine the approximate time of arrival by taking into consideration factors like
distance remaining, average speed due to real-time traffic conditions, historic data and
officially recommended speed. They can thus predict the approximate time needed to reach
the destination using any desired mode of transport (car, walking, train, cycle and other
available modes). The average speed of a person in each of these modes are recorded and
used for determining the ETA.
The technology giant Google is one of the best company at collecting, manipulating, analyzing
data and drawing very accurate conclusions about ETA, shortest path and other such real-time
data. Since it has so much access to data through cellular devices and the data signals emitted
by them, Google Maps can almost correctly and efficiently predict the time taken by the user
to reach his destination.

StepstoLoadtheMaponaWebpage

Follow the steps given below to load a map on your webpage:

Step1:CreateanHTMLPage
Create a basic HTML page with head and body tags as shown below:

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>
</head>

<body>

..............

</body>

</html>

2
<!DOCTYPE html>

<html>

<head>

</head>

<body>

..............

</body>

</html>

Step2 :Load the API

Load or include the Google Maps API using the script tag as shown below:

3
 Google Maps

Step3:CreatetheContainer
To hold the map, we have to create a container element, generally the <div> tag (a generic
container) is used for this purpose. Create a container element and define its dimensions as
shown below:

<div id="sample" style="width: 900px; height: 580px ;">< /div>

Step4:MapOptions
Before initializing the map, we have to create a map Options object (it is created just like a
literal) and set values for map initialization variables. A map has three main options, namely,
center, zoom, and map typed.

 Center − under this property, we have to specify the location where we want to
center the map. To pass the location, we have to create a LatLng object by passing the
latitude and longitudes of the required location to the constructor.

 Zoom − under this property, we have to specify the zoom level of the map.

 Map typed − Under this property, we have to specify the type of the map we want.
Following are the types of maps provided by Google –

o ROADMAP (normal, default 2D map)

o SATELLITE (photographic map)
o HYBRID (photographic map + roads and city names)
o TERRAIN (map with mountains, rivers, etc.)

Within a function, say, load Map (), create the map Options object and set the required
values for center, zoom, and map TypeId as shown below.

Function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.240498, 82.287598),

zoom:9,

mapTypeId:google.maps.MapTypeId.ROADMAP
};

4
 Google Maps

Step5:CreateaMapObject
You can create a map by instantiating the JavaScript class called Map. While instantiating this
class, you have to pass an HTML container to hold the map and the map options for the
required map. Create a map object as shown below.

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

Step6:LoadtheMap
Finally load the map by calling the load Map () method or by adding DOM listener.

google.maps.event.addDomListener(window, 'load', loadMap);

or

<body onload="loadMap()">

Example
The following example shows how to load the roadmap of the city named Vishakhapatnam
with a zoom value of 12.

5
 Google Maps

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:12,

mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

google.maps.event.addDomListener(window, 'load', loadMap);

</script>

</head>

<body>

<div id="sample" style="width:580px;height:400px;"></div>

6
 GOOGLE MAPS – TYPES Google Maps

In the previous chapter, we discussed how to load a basic map. Here, we will see how to
select a required map type.

TypesofMaps
Google Maps provides four types of maps. They are:
 ROADMAP − this is the default type. If you haven't chosen any of the types, this will
be displayed. It shows the street view of the selected region.

 SATELLITE − this is the map type that shows the satellite images of the selected
region.

 HYBRID − this map type shows the major streets on satellite images.

 TERRAIN − this is the map type that shows the terrain and vegetation.

Syntax
To select one of these map types, you have to mention the respective map type id in the
map options as shown below:

var mapOptions = {

mapTypeId:google.maps.MapTypeId.Id of the required map type

};

Roadmap
The following example shows how to select a map of type ROADMAP:

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {
7
center:new google.maps.LatLng(17.609993, 83.221436),

zoom:9,
 Google Maps

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

google.maps.event.addDomListener(window, 'load', loadMap);

</script>

</head>

<body>

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

Satellite
The following example shows how to select a map of type SATELLITE:

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

8
 Google Maps

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:9,

mapTypeId:google.maps.MapTypeId.SATELLITE

};

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

google.maps.event.addDomListener(window, 'load', loadMap);

</script>

</head>

<body>

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

Hybrid

The following example shows how to select a map of type HYBRID:

9
 Google Maps
<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:9,

mapTypeId:google.maps.MapTypeId.Hybrid
};

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

google.maps.event.addDomListener(window, 'load', loadMap);

</script>

</head>

<body>

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

10
 Google Maps

Terrain
The following example shows how to select a map of type TERRAIN:

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:9,

mapTypeId:google.maps.MapTypeId.TERRAIN

};

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

google.maps.event.addDomListener(window, 'load', loadMap);

</script>

</head>

11
 GOOGLE MAPS – ZOOM

Increase/DecreasetheZoomValue
You can increase or decrease the zoom value of a map by modifying the value of the
zoom attribute in the map options.

Syntax
We can increase or decrease the zoom value of the map using the zoom option. Given
below is the syntax to change the zoom value of the current map.

var mapOptions = {

zoom:required zoom value

};

Example:Zoom6
The following code will display the roadmap of the city Vishakhapatnam with a zoom value of
6.

12
<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:6

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

google.maps.event.addDomListener(window, 'load', loadMap);

</script>

</head>

<body>

<div id="sample" style="width:580px;height:400px;"></div>

13
 Google Maps

</body>

</html>

Example:Zoom10
The following code will display the roadmap of the city Vishakhapatnam with a zoom value of
10.

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() { var

mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436), zoom:10

map Typed : google .maps .Map Typed .ROADMAP

};

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

14
 Google Maps

google.maps.event.addDomListener(window, 'load', loadMap);

</script>

</head>

<body>

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

15
 GOOGLE MAPS – LOCALIZATION Google Maps

By default, the city names and option names given on the map will be in English. If required,
we can display such information in other languages as well. This process is known as
localization. In this chapter, we will learn how to localize a map.

LocalizingaMap
You can customize (localize) the language of the map by specifying the language option in
the URL as shown below.

<script src="https://maps.googleapis.com/maps/api/js?language=zh-
Hans"></script>

Example
Here is an example that shows how to localize Google Maps. Here you can see a roadmap of
China that is localized to Chinese language.

16
<!DOCTYPE html>

<html>

<head>

<script src="https://maps.googleapis.com/maps/api/js?language=zh-
Hans"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(32.870360, 101.645508), zoom:9,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

</body>

17
 Google Maps

5. GOOGLE MAPS – UI CONTROLS Google Maps

Google Maps provides a User Interface with various controls to let the user interact with the
map. We can add, customize, and disable these controls.

DefaultControls
Here is a list of the default controls provided by Google Maps:
 Zoom − to increase and decease the zoom level of the map, we will have a slider with
+ and - buttons, by default. This slider will be located at the corner of left hand side
of the map.

 Pan − Just above the zoom slider, there will be a pan control for panning the map.

 Map Type − you can locate this control at the top right corner of the map. It provides
map type options such as Satellite, Roadmap, and Terrain. Users can choose any of
these maps.

 Street view − between the pan icon and the zoom slider, we have a penman icon.
Users can drag this icon and place at a particular location to get its street view.

Example
Here is an example where you can observe the default UI controls provided by Google
Maps:

18
 Google Maps

DisablingtheUIDefaultControls
We can disable the default UI controls provided by Google Maps simply by making the
Disable Default UI value true in the map options.

Example
The following example shows how to disable the default UI controls provided by Google
Maps.

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:5,

mapTypeId:google.maps.MapTypeId.ROADMAP,

disableDefaultUI: true

19
 Google Maps

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

Enabling/DisablingAlltheControls
In addition to these default controls, Google Maps also provides three more controls as
listed below.
 Scale − The Scale control displays a map scale element. This control is not enabled by
default.

 Rotate − The Rotate control contains a small circular icon which allows you to rotate
maps containing oblique imagery. This control appears by default at the top left
corner of the map. (See 45° Imagery for more information.)

20
 Google Maps

 Overview − to increase and decease the zoom level of the map, we have a slider with
+ and - buttons, by default. This slider is located at the left corner of the map.

In the map options, we can enable and disable any of the controls provided by Google
Maps as shown below.

panControl: boolean,

zoomControl: boolean,

mapTypeControl: boolean,

scaleControl: boolean,

streetViewControl: boolean,

overviewMapControl: boolean

Example
The following code shows how to enable all the controls:

21
 Google Maps

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(19.373341, 78.662109),

zoom:5,

panControl: true,

zoomControl: true,

scaleControl: true,

mapTypeControl:true,

streetViewControl:true,

overviewMapControl:true,

rotateControl:true

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

22
 Google Maps

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

ControlOptions
We can change the appearance of Google Maps controls using its control options. For
example, the zoom control can be either reduced or enlarged in size. The Map Type control
appearance can be varied to a horizontal bar or a drop-down menu. Given below is a list of
Control options for Zoom and Map Type controls.

Sr.No Control Control Options

Name

1 Zoom  google.maps.ZoomControlStyle.SMALL
control  google.maps.ZoomControlStyle.LARGE

 google.maps.ZoomControlStyle.DEFAULT

23
 Google Maps

2 MapType  google.maps.MapTypeControlStyle.HORIZONTAL_BAR
control  google.maps.MapTypeControlStyle.DROPDOWN_MENU

 google.maps.MapTypeControlStyle.DEFAULT

Example
The following example demonstrates how to use the control options:

24
 Google Maps

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(19.373341, 78.662109),

zoom:5,

mapTypeControl: true,

mapTypeControlOptions: {

style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds:

google.maps.MapTypeId.ROADMAP,

google.maps.MapTypeId.TERRAIN

]
},

zoomControl: true,

zoomControlOptions: {

style: google.maps.ZoomControlStyle.SMALL

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

</script>

25
 Google Maps

</body>

</html>

ControlPositioning

You can change the position of the controls by adding the following line in the control
options.

position:google.maps.ControlPosition.Desired_Position,

Here is the list of available positions where a control can be placed on a map:
 TOP_CENTER

 TOP_LEFT

 TOP_RIGHT

 LEFT_TOP

 RIGHT_TOP

 LEFT_CENTER

 RIGHT_CENTER
 LEFT_BOTTOM

 RIGHT_BOTTOM

 BOTTOM_CENTER

 BOTTOM_LEFT

 BOTTOM_RIGHT

26
 Google Maps

Example
The following example shows how to place the Maptypeid control at the top center of the
map and how to place the zoom control at the bottom center of the map.
<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(19.373341, 78.662109),

zoom:5,

mapTypeControl: true,

mapTypeControlOptions: {

style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,

position:google.maps.ControlPosition.TOP_CENTER,

mapTypeIds: [ google.maps.MapTypeId.ROADMAP,

google.maps.MapTypeId.TERRAIN

},

zoomControl: true,

zoomControlOptions: {

style: google.maps.ZoomControlStyle.SMALL,

position:google.maps.ControlPosition.BOTTOM_CENTER

}
}

var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

27
 Google Maps

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

28
 6. GOOGLE MAPS – MARKERS Google Maps

We can draw objects on the map and bind them to a desired latitude and longitude. These
are called overlays. Google Maps provides various overlays as shown below.
 Markers
 Polylines
 Polygons
 Circle and rectangle
 Info window
 Symbols

To mark a single location on the map, Google Maps provides markers. These markers use a
standard symbol and these symbols can be customized. This chapter explains how to add
markers, and how to customize, animate, and remove them.

AddingaSimpleMarker
You can add a simple marker to the map at a desired location by instantiating the marker
class and specifying the position to be marked using letting, as shown below.

var marker = new google.maps.Marker({

position: new google.maps.LatLng(19.373341, 78.662109), map:

map,

});

29
Example
The following code sets the marker on the city Hyderabad (India).

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(19.373341, 78.662109), zoom:7

}
var map=new google.maps.Map(document.getElementById("sample"),mapOptions);

var marker = new google.maps.Marker({

position: new google.maps.LatLng(17.088291, 78.442383), map:

map,

});
}

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

</body>

30
 Google Maps

AnimatingtheMarker
After adding a marker to the map, you can go further and add animations to it such as
bounce and drop. The following code snippet shows how to add bounce and drop
animations to a marker.

//To make the marker bounce`

animation:google.maps.Animation.BOUNCE

//To make the marker drop

animation:google.maps.Animation.Drop

31
 Google Maps

Example
The following code sets the marker on the city Hyderabad with an added animation effect:

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.377631, 78.478603), zoom:5

var map=new google.maps.Map(document.getElementById("sample"),mapOptions); var

marker = new google.maps.Marker({

position: new google.maps.LatLng(17.377631, 78.478603), map:

map,

animation:google.maps.Animation.Drop

});

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

32
 Google Maps

CustomizingtheMarker
You can use your own icons instead of the default icon provided by Google Maps. Just
set the icon as icon: ‘ICON PATH'. And you can make this icon drag gable by setting
draggable:true.
Example
The RemovingtheMarker

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.377631, 78.478603), zoom:5

}
var map=new google.maps.Map(document.getElementById("sample"),mapOptions); var

marker = new google.maps.Marker({

position: new google.maps.LatLng(17.377631, 78.478603), map:

map,

draggable:true,

icon:'myicon.jpg'

});

marker.setMap(map);

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

You can remove an existing marker by setting up the marker to null using the
marker.setMap() method following example shows how to customize the marker to a desired icon:

33
 Google Maps
Example

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.377631, 78.478603), zoom:5

}
var map=new google.maps.Map(document.getElementById("sample"),mapOptions); var

marker = new google.maps.Marker({

position: new google.maps.LatLng(17.377631, 78.478603), map:

map,

animation:google.maps.Animation.Drop
});

marker.setMap(null);

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

The following example shows how to remove the marker from a ma

34
 Google Maps

Google Maps

7. GOOGLE MAPS – SHAPES

In the previous chapter, we learned how to use markers in Google Maps. Along with
markers, we can also add various shapes such as circles, polygons, rectangles, polylines, etc.
This chapter explains how to use the shapes provided by Google Maps.

Polylines
Polylines, provided by Google Maps, are useful to track different paths. You can add
polylines to a map by instantiating the class google.maps.Polyline. While instantiating this
class, we have to specify the required values of the properties of a polyline such as Stroke
Color, Stoke Opacity, and stroke Weight.
We can add a polyline to a map by passing its object to the method set Map (Map Object).
We can delete the polyline by passing a null value to the Set Map () method.

Example
The following example shows a polyline highlighting the path between the cities Delhi,
London, New York, and Beijing.
<!DOCTYPE html>
<html>

<head>

<script

src="http://maps.googleapis.com/maps/api/js">

</script>

<script>
function loadMap(){ var

mapProp = {

center:new google.maps.LatLng(51.508742,-0.120850), zoom:3,

mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var
tourplan=new google.maps.Polyline({

35
 path:[new google.maps.LatLng(28.613939, 77.209021),
new google.maps.LatLng(51.507351, -0.127758),
new google.maps.LatLng(40.712784, -74.005941),
new google.maps.LatLng(28.213545, 94.868713) ],

strokeColor:"#0000FF",

strokeOpacity:0.6,

strokeWeight:2

});

tourplan.setMap(map);

//to remove plylines

//tourplan.setmap(null);

</script>

</head>

<body onload="loadMap()">

<div id="googleMap" style="width:580px;height:400px;"></div>

</body>

</html>

Polygons
Polygons are used to highlight a particular geographical area of a state or a country. You can
create a desired polygon by instantiating the class google.maps.Polygon. While

36
 Google Maps

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js">

</script>

<script>

function loadMap(){ var

mapProp = {

center:new google.maps.LatLng(17.433053, 78.412172),

zoom:4,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var

myTrip=[

new google.maps.LatLng(17.385044, 78.486671),

new google.maps.LatLng(19.696888, 75.322451),

new google.maps.LatLng(21.056296, 79.057803),

new google.maps.LatLng(17.385044, 78.486671)]; var

flightPath=new google.maps.Polygon({

path:myTrip,

strokeColor:"#0000FF",

strokeOpacity:0.8,

strokeWeight:2,

fillColor:"#0000FF",

fillOpacity:0.4

});

Instantiating, we have to specify the desired values to the properties of Polygon such as
path, stroke Color, stroke Opacity, fill Color, fill Opacity, etc.

37
 Google Maps
Example
The following example shows how to draw a polygon to highlight the cities Hyderabad,
Nagpur, and Aurangabad.

</head>

<body onload="loadMap()">

<div id="googleMap" style="width:580px;height:400px;"></div>

</body>

</html>

Rectangles
We can use rectangles to highlight the geographical area of a particular region or a state
using a rectangular box. We can have a rectangle on a map by instantiating the class
google.maps.Rectangle. While instantiating, we have to specify the desired values to the
properties of the rectangle such as path, stroke Color, stroke Opacity, fill Color, fill Opacity,
stroke Weight, bounds, etc.

38
 Google Maps
Example
The following example shows how to highlight a particular area on a map using a rectangle:

<!DOCTYPE html>
<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js">

</script>

<script>

function loadMap(){ var

mapProp = {

center:new google.maps.LatLng(17.433053, 78.412172), zoom:6,

mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var

myrectangle=new google.maps.Rectangle({

strokeColor:"#0000FF",

strokeOpacity:0.6,

strokeWeight:2,

fillColor:"#0000FF",

fillOpacity:0.4, map:map,

bounds:new google.maps.LatLngBounds(

new google.maps.LatLng(17.342761, 78.552432),

new google.maps.LatLng(16.396553, 80.727725))

});

</script>

</head>

<body onload="loadMap()">

<div id="googleMap" style="width:580px;height:400px;"></div>

</body>

</html>

39
Circles
Just as rectangles, we can use Circles to highlight the geographical area of a particular region
or a state using a circle by instantiating the class google.maps.Circle. While instantiating, we
have to specify the desired values to the properties of the circle such as path, stroke Color,
stroke Opacity, fill Color, fill Opacity, stroke Weight, radius, etc.
Example

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js">
</script>

<script>

function loadMap(){ var

mapProp = {
center:new google.maps.LatLng(28.613939,77.209021), zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP

};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var
myCity = new google.maps.Circle({
center:new google.maps.LatLng(28.613939,77.209021), radius:150600,
strokeColor:"#B40404",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#B40404",
fillOpacity:0.6
});

myCity.setMap(map);

</script>

</head>

<body onload="loadMap()">

<div id="googleMap" style="width:580px;height:400px;"></div>

</body>

</html>

40
 8. GOOGLE MAPS – INFO WINDOW Google Maps

In addition to markers, polygons, polylines, and other geometrical shapes, we can also draw
an Info Window on the map. This chapter explains how to use the Info Window.

AddingaWindow
Info Window is used to add any kind of information to the map. For instance, if you want to
provide information about a location on the map, you can use an info window. Usually the
info window is attached to a marker. You can attach an info window by instantiating the
google.maps.InfoWindow class. It has the following properties:
 Content − you can pass your content in String format using this option.

 Position − you can choose the position of the info window using this option.

 Max Width − by default, the info window's width will be stretched till the text is
wrapped. By specifying max Width, we can restrict the size of the info window
horizontally.

Example
The following example shows how to set the marker and specify an info window above it:

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.433053, 78.412172), zoom:5

}
var map=new google.maps.Map(document.getElementById("sample"),mapOptions); var

marker = new google.maps.Marker({

position: new google.maps.LatLng(17.433053, 78.412172), map:

41
 Google Maps

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({

content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA- 500033"

});

infowindow.open(map,marker);

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

42
 9. GOOGLE MAPS – SYMBOLS Google Maps

In addition to markers, polygons, polylines, and other geometrical shapes, we can also add
predefined vector images (symbols) on a map. This chapter explains how to use the symbols
provided by Google Maps.

AddingaSymbol
Google provides various vector-based images (symbols) that can be used on a marker or a
polyline. Just like other overlays, to draw these predefined symbols on a map, we have to
instantiate their respective classes. Given below is a list of predefined symbols provided by
Google and their class names:
 Circle − google.maps.SymbolPath.CIRCLE

 Backward Pointing arrow (closed) −

google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

 Forward Pointing arrow (closed) −

google.maps.SymbolPath.FORWARD_CLOSED_ARROW

 Forward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE

 Backward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE

These symbols have the following properties: path, fill Color, fillOpacity, scale, stokeColor,
strokeOpacity, and strokeWeight.
Example
The following example demonstrates how to draw predefined symbols on Google Map.

43
<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.433053, 78.412172), zoom:5

}
var map=new google.maps.Map(document.getElementById("sample"),mapOptions); var

marker = new google.maps.Marker({

position: map.getCenter(), icon:

path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, scale: 5,

strokeWeight:2, strokeColor:"#B40404"

},
draggable:true, map:

map,

});

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

</body>

</html>

44
 Google Maps

AnimatingtheSymbol
Just like markers, you can add animations such as bounce and drop to the symbols as well.

Example
The following example shows how to use a symbol as a marker on a map and add
animation to it:
<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.433053, 78.412172), zoom:5

var map=new google.maps.Map(document.getElementById("sample"),mapOptions); var

marker = new google.maps.Marker({

position: map.getCenter(), icon:

path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, scale: 5,

strokeWeight:2, strokeColor:"#B40404"

},
animation:google.maps.Animation.DROP, draggable:true,

map: map

});

</script>

</head>

<body onload="loadMap()">

<div id="sample" style="width:580px;height:400px;"></div>

</body>
</html>

45
 Google Maps

Google Maps

10 GOOGLE MAPS –
. EVENTS
The Google Maps JavaScript program can respond to various events generated by the user. This chapter
provides examples demonstrating how to perform event handling while working with Google Maps
AddinganEventListener
You can add an event listener using the method add Listener (). It accepts parameters such as object
name on which we want to add the listener, name of the event, and the handler event.
Example
The following
<!DOCTYPE html> example shows how to add an event listener to a marker object. The program raises the
<html>
zoom value of the map by 5 each time we double-click on the marker.
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(17.433053, 78.412172);

function loadMap(){ var

mapProp = {
center: myCenter, zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var
marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>

<body onload="loadMap()">
<div id="googleMap" style="width:580px;height:400px;"></div>
</body>
</html>

46
 Google Maps

OpeninganInfoWindowonClick
The following code opens an info window on clicking the marker:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){ var

mapProp = {

center:myCenter,

zoom:4,

mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new

google.maps.Map(document.getElementById("googleMap"),mapProp); var

marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({

content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);
});
}
</script>

</head>
<body onload="loadMap()">
<div id="googleMap" style="width:580px;height:400px;"></div>
</body>
</html>

47
 Google Maps

RemovingtheListener
You can remove an existing listener using the method removeListener(). This method
accepts the listener object, therefore we have to assign the listener to a variable and pass it
to this method.
Example
The following code shows how to remove a listener

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js">

</script>
<script>

var myCenter=new google.maps.LatLng(17.433053, 78.412172);

function loadMap(){
var mapProp = {

center:myCenter,

zoom:4,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var

marker=new google.maps.Marker({

position:myCenter,

});

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({

content:"Hi"

});

var myListener = google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);

});

google.maps.event.removeListener(myListener);

</script>
48
</head>
Google Maps

49