Cómo agregar Google Maps con un marcador a un sitio web

Google Maps es un servicio de mapas web desarrollado por Google. Ofrece imágenes satelitales, mapas de calles, vistas panorámicas de 360° de las calles (Street View), condiciones del tráfico en tiempo real (Google Traffic) y planificación de rutas para viajar a pie, en automóvil, en bicicleta (en versión beta) o en transporte público.

Para agregar un Google Maps con un marcador en un sitio web, se requieren tres pasos esenciales:

Crear una página HTML
Agregar un mapa con un marcador
Obtener una clave de API

Paso 1: Creación de una página Html.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <p>My Google Maps Demo</p>
    <div id="map"></div>
  </body>
</html>

Salida:

el código dado describe el CSS que establece el tamaño y el color del div. El elemento de estilo establece el tamaño div para su mapa.div se establece en una altura de 400 píxeles y un ancho del 100% para mostrar el mapa en todo el ancho de su página web.

El código define un área de la página para el mapa de Google. El div aparece como un bloque gris en la salida porque el mapa aún no se ha agregado.

Paso 2: Agregar mapa con un marcador:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <p>My Google Maps Demo</p>
    <div id="map"></div>
    <script>
      function initMap() {
        var test= {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: test
        });
        var marker = new google.maps.Marker({
          position: test,
          map: map
        });
      }
    </script>
    <script async defer
    src=
"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Explicación :

En el código, el script carga la API desde la URL especificada.
El parámetro de devolución de llamada ejecuta la función initMap después de que se carga la API.
El atributo asíncrono permite que el navegador continúe representando el resto de la página mientras se carga la API.
El parámetro clave contiene la clave API.
Escriba su clave api dentro de «clave =».

El código contiene la función initMap que inicializa y agrega el mapa cuando se carga la página web. La etiqueta de script se puede usar para agregar su propio javascript.
El código construye un nuevo objeto de mapas de Google y agrega propiedades al mapa, incluido el centro y el nivel de zoom.
En el siguiente código, new google.maps.Map() crea un nuevo objeto de mapas de Google.
La propiedad del centro le dice a la API dónde centrar el mapa. Las coordenadas del mapa se establecen en el orden: latitud, longitud.
La propiedad de zoom especifica el nivel de zoom del mapa. Zoom: 0 es el zoom más bajo y muestra toda la tierra. Establezca el valor de zoom más alto para acercarse a la tierra a resoluciones más altas.

El siguiente código pone un marcador en el mapa. La propiedad position establece la posición del marcador.

Paso 3: Obtener una clave de API
Los siguientes son los pasos necesarios para obtener una clave de 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

Producción :

Ejemplo: agregar la ciudad de la oficina de GeeksforGeeks en los mapas de Google

APORTE :

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>GFG Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: 28.501859, lng: 77.410320};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src=
"https://maps.googleapis.com/maps/api/js?key=
AIzaSyB2bXKNDezDf6YNVc-SauobynNHPo4RJb8&callback=initMap">
    </script>
  </body>
</html>

Producción :

Este artículo es una contribución de Shubrodeep Banerjee . Si te gusta GeeksforGeeks y te gustaría contribuir, también puedes escribir un artículo usando write.geeksforgeeks.org o enviar tu artículo por correo a review-team@geeksforgeeks.org. Vea su artículo que aparece en la página principal de GeeksforGeeks y ayude a otros Geeks.

Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema tratado anteriormente.

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta