Google Maps Tutorial
Google Maps Resources
Selected Reading
- Google Maps - Events
- Google Maps - Symbols
- Google Maps - Info Window
- Google Maps - Shapes
- Google Maps - Markers
- Google Maps - UI Controls
- Google Maps - Localization
- Google Maps - Zoom
- Google Maps - Types
- Google Maps - Getting Started
- Google Maps - Home
Google Maps Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google Maps - Types
Google Maps - Types
In the previous chapter, we discussed how to load a basic map. Here, we will see how to select a required map type.
Types of Maps
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 satelpte images of the selected region.
HYBRID − This map type shows the major streets on satelpte 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 = "https://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.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, load , loadMap);
</script>
</head>
<body>
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It will produce the following output −
Satelpte
The following example shows how to select a map of type SATELLITE −
<!DOCTYPE html>
<html>
<head>
<script src = "https://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.SATELLITE
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, load , loadMap);
</script>
</head>
<body>
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It will produce the following output −
Hybrid
The following example shows how to select a map of type HYBRID −
<!DOCTYPE html>
<html>
<head>
<script src = "https://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>
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It will produce the following output −
Terrain
The following example shows how to select a map of type TERRAIN −
<!DOCTYPE html>
<html>
<head>
<script src = "https://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>
<body>
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It will produce the following output −
Advertisements