wordpress campos personalizados avanzados google map api clave

4 minutos de lectura

avatar de usuario
Bogdánov

Tengo un problema al cargar el mapa de Google con el complemento de campo personalizado avanzado. Hago todo como en las instrucciones en la página del complemento aquí https://www.advancedcustomfields.com/resources/google-map.
Agregué el campo google-map en ACF, pero en la página donde debería estar, aparece por un segundo y luego desaparece con la inscripción “¡Vaya! Algo salió mal. Esta página no cargó Google Maps correctamente. Ver la consola de JavaScript para detalles técnicos”. (ver la captura de pantalla). La consola dice que necesito configurar la clave API de Google. Supongo que también necesito modificar algunas cadenas en el archivo .js de la instrucción ACF, pero no sé cuáles. Puede ser que alguien pueda ayudar.
Gracias de antemano.
captura de pantalla

avatar de usuario
creaforja

ACF actualizó el Documentación de mapas de Google

primero tienes que obtener una clave API de mapas y asegúrese de activar las siguientes API:

  • API de JavaScript de mapas
  • API de geocodificación
  • API de lugares

Luego registre la clave API en su functions.php

Si usa ACF gratis

function my_acf_google_map_api( $api ){
    $api['key'] = 'xxx';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

Si utiliza ACF pro

function my_acf_init() {
    acf_update_setting('google_api_key', 'xxx');
}

add_action('acf/init', 'my_acf_init');

En mi caso, tuve que borrar y volver a crear el campo para que se guardara correctamente.

  • ¡Esto funcionó para mí! Gracias

    –Matthew Woodard

    26 de enero de 2018 a las 14:23

  • El sitio de ACF dice que solo se debe activar “Maps JavaScript API, Geocoding API y Places API”. Probado y funciona.

    – herr fischer

    1 de febrero de 2020 a las 20:08

  • Gracias @HenningFischer, acabo de actualizar la respuesta según tu comentario 🙂

    – Crea forja

    2 de febrero de 2020 a las 22:24

Una solución podría ser editar las funciones.php en su plantilla

//TODO: fix api key for advanced custom field
add_action('acf/fields/google_map/api', function($api){
$api['key'] = '<YOUR_API_KEY>';
return $api;
});

o puede consultar mi artículo para una solución completa

avatar de usuario
Manikandan

agregue esta línea en su secuencia de comandos … reemplace con su clave …

<script src="https://stackoverflow.com/questions/38282612/javascripts/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
<script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>

He encontrado un par de soluciones diferentes para este problema, pero antes de comenzar a explicar qué hacer, permítame recordarle que debe obtener una clave API de Google Maps. Seguí estas instrucciones porque estoy usando el tema Listify, pero estoy bastante seguro de que pueden ayudarlo independientemente del tema que tenga.

Aquí mis soluciones:

Interfaz

En algún lugar (supongo que en tu functions.php o en your-awesome-widget.php) deberías tener una línea como estas

wp_enqueue_script( 'googlemaps_api' );

o

wp_enqueue_script( 'googlemaps' );

la solución que encontré es agregar la clave en el registro del script antes de ponerlo en cola, de esta manera

wp_register_script('googlemaps', 'http://maps.googleapis.com/maps/api/js?key='.$YOUR_API_KEY, false, '3');

wp_enqueue_script('googlemaps');

back-end

Este es rápido y totalmente sucio porque he leído que el soporte de ACF ya está trabajando en la solución oficial, por lo que, para mí, no es un problema si será borrado por una actualización del complemento.

Abre esos dos archivos:

  • campos-personalizados-avanzados/js/input.min.js

  • advanced-custom-fields/js/input.js (en teoría, si está utilizando la versión .min, esta es inútil)

Este fragmento de código se repite dos veces en cada archivo:

google.load('maps', '3', { other_params: $.param(self.api), callback: function(){

cambie esas dos ocurrencias agregando la clave como cadena de consulta, de esta manera

other_params: $.param(i.api) + 'key=YOUR_API_KEY', callback

Et voila! Deberia de funcionar.

La página oficial sobre el tema es aquí

¡Espero haber sido de ayuda!

Con la versión actual (4.4) de ACF, puede encontrar functions.php en la plantilla que está utilizando y agregar esto al final del código:

function my_acf_google_map_api( $api ){
    $api['key'] = 'YOUR_API_KEY';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

Cambie ‘YOUR_API_KEY’ por su CLAVE API generada por Google.

  • Esta respuesta no es de muy baja calidad, pero es muy similar a una respuesta existente. No hay nada nuevo en esta respuesta.

    – Alejandro Tranchant

    10 de diciembre de 2016 a las 11:55

  • Esta respuesta no es de muy baja calidad, pero es muy similar a una respuesta existente. No hay nada nuevo en esta respuesta.

    – Alejandro Tranchant

    10 de diciembre de 2016 a las 11:55

¿Ha sido útil esta solución?