jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS, o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript.
¿Qué son los mapas de Google?
Google Map es una tecnología y una aplicación de servicio de mapas basada en web gratuita proporcionada por Google. La aplicación proporciona información completa sobre regiones geográficas, mapas de calles y el planificador de rutas para viajar en automóvil, a pie o en transporte público. Vistas satelitales de los países de todo el mundo.
HTML Google Map se puede utilizar para mostrar los mapas en la página web. Uno puede simplemente agregar una página HTML de mapa.
Sintaxis:
<!DOCTYPE html> <html> <body> <h1Map Example</h1> <div id="map">Enter text</div> </body>
Establecer el tamaño del mapa
Sintaxis:
<div id="map" style="width:400px;height:400px;background:grey"> </div>
Crear una función para establecer las propiedades del mapa
Las propiedades del mapa se pueden establecer creando una función. Tenemos que utilizar las funcionalidades de Google Maps API proporcionadas por una biblioteca de JavaScript ubicada en Google.
<script src=
"https://maps.googleapis.com/maps/api/js?callback=myMap">
</script>
Crear un mapa
- En el ejemplo anterior, utilizaremos la API de Google para cargar el mapa de Google.
<script src = "https://maps.googleapis.com/maps/api/js"></script>
- Los siguientes son los pasos necesarios para obtener una clave API:
- Vaya al enlace mencionado a continuación https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true
- Cree un nuevo proyecto o seleccione uno de sus proyectos existentes.
- Haga clic en Continuar para habilitar la API.
- En la página Credenciales, obtenga una clave de API (y configure las restricciones de la clave de API).
- Reemplace el valor del parámetro clave en la URL con su propia clave API
- Para personalizar los mapas:
var CustomOp = {
center:new google.maps.LatLng(28.502212, 77.405603),
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
- En este caso, CustomOp es un objeto que contiene 3 opciones, centro , zoom y maptypeid .
- centro: esta propiedad se utiliza para establecer el punto específico en los mapas.
- zoom: Esta propiedad se utiliza para especificar el nivel de zoom en un punto específico.
- maptypeid: Esta propiedad se utiliza para especificar el tipo de mapa. (HOJA DE RUTA, SATÉLITE, HÍBRIDO, TERRENO)
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.
Ejemplo 1: HOJA DE RUTA
html
<!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>
Salida: 
Ejemplo 2: SATÉLITE
html
<!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>
Salida: 
Ejemplo 3: HÍBRIDO
html
<!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>
Salida: 
Ejemplo 4: TERRENO
html
<!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 sharmaanushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA