El atributo Zoom se utiliza para aumentar o disminuir el nivel de zoom en un punto específico de los mapas. Para personalizar el nivel de zoom, cambie el valor del zoom. El valor predeterminado de zoom es 10.
Sintaxis:
var CustomOp = {
zoom:zoom value
};
Ejemplo 1: este ejemplo establece el nivel de zoom en 10.
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Zoom
</title>
<!-- Loading map API -->
<script src=
"https://maps.googleapis.com/maps/api/js">
</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>
<!-- load map -->
<body onload = "GFG()">
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id = "DivID" style=
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo establece el nivel de zoom en 15.
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Zoom
</title>
<!-- Loading map API -->
<script src=
"https://maps.googleapis.com/maps/api/js">
</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>
<!-- load map -->
<body onload = "GFG()">
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id = "DivID" style=
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA