Para personalizar el mapa de Google, se proporcionan cuatro tipos de mapas.
- HOJA DE RUTA: este tipo de mapa muestra la vista de la calle del área específica. Es el tipo de mapa predeterminado.
- SATÉLITE: Este tipo de mapa muestra las imágenes satelitales del área específica.
- HÍBRIDO: este tipo de mapa muestra las principales calles del área específica.
- TERRENO: Este tipo de mapa muestra el terreno y la vegetación.
Sintaxis:
var CustomOp= {
mapTypeId:google.maps.MapTypeId.ROADMAP | SATELLITE | HYBRID | TERRAIN
};
Ejemplo 1: HOJA DE RUTA
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<!-- Add Google map API source -->
<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:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<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: SATÉLITE
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<!-- Add Google map API source -->
<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:17,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<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 3: HÍBRIDO
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<!-- Add Google map API source -->
<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:17,
mapTypeId:google.maps.MapTypeId.HYBRID
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<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 4: TERRENO
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<!-- Add Google map API source -->
<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:17,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<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