In this topic, we will discuss Zooms in Google Maps.
Increase/Decrease the Zoom Value
You can increase or decrease the zooms 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 zooms 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>
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>
Next Topic:-Click Here