Mapas de Google | Introducción

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
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

Deja una respuesta Cancelar la respuesta