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