¿Cómo implementar Google Maps API en un proyecto de WeWeb?

Paso de preparación: Obtén una clave de API de Google Maps

Antes de poder implementar la API de Google Maps en tu proyecto WeWeb, primero necesitarás una clave de API de Google Maps. Esta se puede obtener de la plataforma Google Cloud. Aquí te explicamos cómo hacerlo:

• Visita la consola de Google Cloud Platform en https://console.cloud.google.com/

• Si no tienes una cuenta de Google, necesitarás crear una. Si ya tienes una, inicia sesión.

• Después de haber iniciado sesión, haz clic en "Seleccionar un proyecto" en la parte superior derecha, luego en "NUEVO PROYECTO" en la parte superior derecha de la ventana modal que aparece.

• Dale un nombre a tu proyecto y haz clic en "CREAR".

• Una vez que tu proyecto esté listo, selecciona "Dashboard" en la barra lateral izquierda.

• Haz clic en "HABILITAR API Y SERVICIOS" en la parte superior.

• En la siguiente pantalla, escribe "Maps" en la barra de búsqueda y selecciona "Maps JavaScript API".

• Haz clic en "HABILITAR".

• Después de que la API esté habilitada, haz clic en "Credenciales" en la barra lateral izquierda.

• Haz clic en "CREAR CREDENCIALES" en la parte superior, luego selecciona "Clave de API".

• Tu clave de API será creada y mostrada. Asegúrate de restringirla a los referentes HTTP y agrega los dominios en los que se utilizará esta API, para prevenir un uso no autorizado.

Asegúrate de mantener tu clave de API privada y segura.

Primer Paso: Inicia tu proyecto WeWeb

Si aún no lo has hecho, inicia tu nuevo proyecto WeWeb o abre tu proyecto existente donde quieras implementar la API de Google Maps.

Segundo Paso: Agrega un cuadro HTML a tu página web

En WeWeb, navega a la página donde quieras incrustar el mapa y agrega un cuadro HTML que contendrá el mapa. Para hacer esto:

• Haz clic en el botón "+" en la barra de herramientas para abrir el catálogo de widgets.

• Arrastra y suelta el cuadro HTML en tu página en la ubicación deseada.

Tercer Paso: Incorpora la API de Google Maps

En el cuadro HTML, vas a escribir las líneas de código que llaman a la API de Google Maps. Así es cómo hacerlo:

• Haz clic en tu nuevo cuadro HTML para abrir las opciones de configuración en la barra lateral izquierda.

• En el campo "HTML PERSONALIZADO", ingresa el siguiente código:

<div id="map"></div>

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=TU_CLAVE_API&callback=initMap"></script>

Reemplaza 'TU_CLAVE_API' con la clave de API que obtuviste de Google Cloud Platform.

Los valores de latitud y longitud en el fragmento de código corresponden a los valores de latitud y longitud de la ubicación inicial que se mostrará en tu mapa. Puedes cambiar estos a los valores que necesites.

Cuarto Paso: Diseña tu mapa

En el mismo campo "HTML PERSONALIZADO", puedes agregar algo de CSS para diseñar el tamaño y la apariencia de tu mapa. Por ejemplo, podrías agregar las siguientes líneas de código para hacer que el mapa llene todo el ancho de la pantalla y establecer una altura específica:

<style>
  #map {
    height: 400px;
    width: 100%;
  }
</style>

Quinto Paso: Guarda y visualiza tu mapa

Haz clic en el botón "Previsualizar" en la parte superior de la pantalla para guardar tu proyecto y ver tu mapa.

El mapa de Google ahora debería mostrarse en tu sitio web. Ahora puedes personalizar el mapa según tus necesidades utilizando las diferentes características y funcionalidades proporcionadas por la API de JavaScript de Google Maps.