En junio de 2016, Google anunció que cambiaría la forma en que los usuarios agregan Google Maps a su sitio web. En el futuro, los nuevos usuarios necesitarán una clave API de Google Maps.
Eso significa que, al menos por el momento, los usuarios existentes de Google Maps no se ven afectados: los mapas que se muestran actualmente en su sitio web seguirán funcionando. Cuánto tiempo seguirá funcionando es una incógnita. Mi consejo es que esté preparado para los cambios y obtenga una clave API de Google Maps ahora.
Si está buscando agregar un nuevo mapa a su sitio web, la elección está fuera de sus manos: necesita esa clave API o ningún mapa.
En la publicación de hoy, lo guiaré a través de los pasos necesarios para adquirir una clave API de Google Maps y luego agregar Google Maps a un sitio web impulsado por Divi .
Ahora, hay una serie de API compatibles con Google Developers. La que necesitas si quieres mostrar mapas es la clave API de JavaScript de Google Maps .
Una breve advertencia: la API de JavaScript de Google Maps se divide en dos planes: Estándar y Premium . La mayoría de ustedes querrá optar por el plan Estándar . Le brinda acceso gratuito hasta 25,000 cargas de mapas por día. Más allá de esto, debe pagar $0.50 por cada 1000 vistas adicionales, hasta 100 000 vistas por día. (Si tiene la suerte de generar tráfico que supere estos límites, puede obtener más información sobre el plan Premium haciendo clic aquí ).
Con eso fuera del camino, comencemos y agreguemos algunos mapas a nuestros sitios web.
El primer paso es adquirir la clave API de Google Maps. Antes de que pueda hacer algo de esto, necesita una cuenta de Google; puede configurar una gratis haciendo clic aquí . Sin embargo, supondré que la mayoría de ustedes ya tiene una cuenta de Google, así que pasemos al siguiente paso.
Cuando haya iniciado sesión en Google, diríjase a la página de la API de Javascript de Google Maps: enlace aquí .
Desplácese hacia abajo en la página, luego haga clic en el botón azul grande Obtener una clave .
Esto abrirá una caja de luz. En la parte superior, podrás darle un nombre a tu proyecto. Para continuar, debe aceptar los términos de servicio de Google y luego hacer clic en Crear y habilitar API .
Después de unos segundos de espera, Google habrá generado su clave API de Google Maps. Asegúrese de copiar esto y guardarlo en un lugar seguro para su uso posterior.
Protección de la clave API de Google Maps
Hasta ahora, todo bien. El siguiente paso es mejorar la seguridad de su nueva aplicación. Esto significa hacer clic en el botón Ir a la consola directamente debajo de su clave API. Esto abre una nueva ventana.
En esta pantalla, puede restringir el uso de su API solo a su sitio web. Esto significa que ningún usuario no autorizado puede obtener su clave API y luego usarla en su propio sitio web, lo que consume su asignación diaria de carga de mapas y, potencialmente, le cuesta mucho dinero si tiene habilitada la facturación.
Afortunadamente, esto también es muy fácil de hacer. En la ventana que Google acaba de abrir para usted, busque la sección Restricción de clave .
Si solo desea mostrar mapas en su sitio web de WordPress, seleccione la opción Referencias HTTP (sitios web) .
Esto abrirá un nuevo campo para que agregues tu/s dominio/s. Asegúrese de agregarlos en el formato requerido: *.example.com/*
Los asteriscos, barras y puntos deben formatearse exactamente así. Si desea agregar varios dominios, puede agregarlos una línea a la vez.
Cuando haya terminado, presione el botón Guardar . Ahora tiene que esperar unos minutos para que se implementen los cambios, luego puede usar su clave API recién creada para agregar Google Maps a su sitio web.
Agregue mapas a su sitio web Divi con la clave API de Google Maps
Ahora es el momento de la parte divertida: agregar los mapas a su sitio. Y, para los usuarios de Divi, esta tarea es súper fácil, o haga clic aquí si desea leer detenidamente una colección de los mejores complementos de Google Maps .
Todo lo que necesita hacer es navegar a Divi > Opciones de tema . En la pestaña General , desplácese hacia abajo hasta el campo API de Google Maps . En el espacio provisto, continúe y pegue su clave API de Google Maps, luego presione Guardar cambios .
Luego verá un ícono de marca verde, que muestra que su clave API ha sido aceptada. Ahora está listo para agregar Google Maps a su sitio.
Módulo de mapas Divi Builder
No entraré en demasiados detalles aquí, pero déjame mostrarte rápidamente cómo agregar mapas a un sitio web de Divi. Para comenzar, abra el editor visual de WordPress – Publicaciones > Agregar nuevo – luego haga clic en el botón Usar The Divi Builder .
A continuación, inserte una columna o fila, luego haga clic en Insertar módulos .
De la lista de módulos, seleccione Mapa .
Ahora puede comenzar a configurar sus mapas. Comience especificando el punto central del mapa, luego puede colocar una cantidad ilimitada de pines en su mapa presionando el botón New Pin . Se le pedirá que especifique una ubicación física para cada pin.
Con los mapas Divi, cuando un visitante se desplaza sobre un pin, se abre un pequeño cuadro de información que proporciona más detalles. Por supuesto, puede completar esto usted mismo con contenido relacionado con la ubicación.
El módulo Divi Map admite una versión reducida del editor visual de WordPress, que puede usar para escribir el contenido del pin. También puede seleccionar una imagen de su biblioteca de medios para adjuntarla al pin.
Cuando haya terminado con un pin en particular, simplemente presione Guardar . Esto lo lleva de regreso a la pantalla del mapa principal, donde encontrará algunas configuraciones más para que las configure. Estos incluyen activar el zoom de la rueda del mouse y si desea deshabilitar los mapas en dispositivos más pequeños.
Cuando haya terminado, no olvide hacer clic en Guardar y salir .
Ahora, cuando publiques tu publicación, ¡listo! ¡Tienes un mapa espectacular!
Pensamientos finales
Aunque los cambios aplicados a Google Maps pueden haber incomodado a algunos usuarios, esperamos que este breve tutorial le muestre lo fácil que es cumplir con las nuevas reglas de Google y crear una clave API de Google Maps. Los usuarios de Divi pueden pegar esta clave API en la pantalla de configuración sin problemas, para que pueda comenzar a agregar mapas en solo segundos.
Siéntase libre de compartir sus pensamientos sobre los cambios en la API de Google en los comentarios a continuación. ¡También puede usar este espacio para recomendar su complemento favorito de Google Maps!
Imagen en miniatura del artículo de Julia Tim / shutterstock.com