Google Maps es un servicio de mapas web gratuito de Google. Este servicio proporciona varios tipos de información geográfica. Con la ayuda del mapa de Google, se pueden buscar lugares y direcciones. Además, podemos obtener la información de tráfico de una zona concreta o visualizar imágenes a pie de calle de ciudades.
Google Maps tiene una API de JavaScript. Esta API se utiliza para personalizar el mapa que muestra la información.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> Google Maps | Introduction </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:
Explicación:
- En el ejemplo anterior, usaremos 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
- Vaya al enlace mencionado a continuación
- 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 crear un objeto de mapa usaremos el siguiente código:
var map = new google.maps.Map(document.getElementById("DivID"), CustomOp);
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