Increase/Decrease the Zoom Value
You can increase or decrease the zoom value of a map by modifying the value of the
zoom attribute in the 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 : Zoom 6
The following code will display the roadmap of the city Vishakhapatnam with a zoom value of 6.
<!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:6,
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:587px; height:400px;"></div>
</body>
</html>
It will produce the following output −
Example : Zoom 10
The following code will display the roadmap of the city Vishakhapatnam with a zoom value of 10.
<!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:10,
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:587px; height:400px;"></div>
</body>
</html>
It will produce the following output −
No comments:
Post a Comment