Google Maps is a web-based service developed by Google. It contains geographical information and provides routes and information to the client.
Container element is created to hold the Map. We use
tag as a container.
<div id = "sample" style = "width:900px; height:580px;"></div>
4) Google Maps Options.
Following are the various options that Google Maps provide.
Example
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.240498, 82.287598),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
}
5) Map Object Creation
Map is created by creating JavaScript class known as Map.
- var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
6) Load the Map
We can load Map either by
loadmap() method or adding
DOM listner.
Example
google.maps.event.addDomListener(window, 'load', loadMap);
or
<body onload = "loadMap()">
4) What are the different types of Google Maps?
There are four types of Google maps.
- Road map- It is default map type. It displays the default road map view.
- Satellite- It display Google Earth satellite images.
- Hybrid- It display the mixture of normal and satellite views.
- Terrain- It display a physical map based on territory information.
5) How can we change the zoom in Google Maps?
We can increase or decrease the zoom value of a map by changing the zoom feature in the map option. The syntax to modify the zoom value is:
We can set it in our code as following.
var mapOptions = {
zoom:required zoom value
};
6) How can we change the language in Google Maps?
The default language of Google Maps is English. We can localize the language of the map by specifying the language option in URL:
<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
7) What are the User Interface (UI) Controls of Google Maps?
Google Maps provides various user-friendly controls to user to interact with map. We can add, customize and disable these controls.
Some controls are default provided like:
- Zoom- It display the "+" and "-" button to changing the zoom level of the map. This control appear in bottom right corner of the map.
- Pan- Pan Control is used for panning the map.
- Map type- It provides map type options such as Satellite, Road map and Terrain. It appears on the top right corner of the map.
- Street view- It contains Pegman icon which can be used to get the street view of a particular location, whenever it is dragged.
8) What is Google Maps Overlays?
Any Object can be draw on the map and attach them to preferred latitude and longitude are known as overlays. Various overlays provided by Google maps like.
- Markers
- Polylines
- Polygons
- Circle and rectangles
- info windows
- Symbols
9) What is Google Maps Marker?
Google Maps Marker is used to mark a location on the map. Marker uses standard symbols which can be customized.
10) What is Shape in Google Maps?
Shape is usually known object on the Google Maps.
11) What are the different shapes of Google Maps?
Following are the different shapes provided by Google Maps.
Polylines- It is used to get different paths, destinations provided by the Google Maps.
Polygons- It is used to highlight a specific area of a state or country.
Circles- It is used to highlight the geographical area of particular region or state. It is an instance of the class
google.maps.circle.
Rectangles- It is used to specify the geographical area using rectangular box. It is similar to Polygon. It represents the class
google.maps.Rectangle.
12) How a polyline can be added?
It can be added by passing the object to
setMap (MapObject) method.
13) How a polyline can be deleted?
By passing the null value polyline can be deleted
SetMap ().
14) What is Info Window of Google Maps?
Info window is used to add any kind of information to the map. It displays the text and images. Info window can be added by using
google.maps.InfoWindow class.
15) What are the properties of Info Window?
Following are the properties of Info window:
Content- By using this option we can pass our content in string format.
Position- By using this option we can choose the position of the Info window.
MaxWidth- It specifies the maximum width of the info window in pixels.
16) Define Symbols of Google Maps.
A Symbol is a vector-based image that can be displayed on a Marker or Polyline Object.
There are different symbols like Circle, Backward pointing arrow (closed), Forward Pointing arrow (closed), Forward Pointing arrow (open), Backward pointing arrow (Open).
17) How to add Symbol in Google Maps?
| Symbol |
Google Maps property |
| 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 |
18) What are the Google Maps Events?
Events are the activities happen at some point of time. Google Maps use JavaScript code to handle events.
19) How to add Event Listener in Google maps?
We can use
addListener() method to add an event listener to the Google Maps
