Google Maps | Zoom
Last Updated :
13 Mar, 2020
The Zoom attribute is used to increase or decrease the zoom level on a specific point in maps. To customize the zoom level change the zoom value. The default value of zoom is 10.
Syntax:
var CustomOp = {
zoom:zoom value
};
Example 1: This example sets the zoom level at 10.
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Zoom
</title>
<script src=
</script>
<script>
function GFG() {
var CustomOp = {
center:new google.maps.LatLng(
28.502212, 77.405603),
zoom:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<body onload = "GFG()">
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Google Maps</h3>
<div id = "DivID" style=
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
|
Output:
Example 2: This example sets the zoom level to 15.
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Zoom
</title>
<script src=
</script>
<script>
function GFG() {
var CustomOp = {
center:new google.maps.LatLng(
28.502212, 77.405603),
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<body onload = "GFG()">
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Google Maps</h3>
<div id = "DivID" style=
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...