20 juillet 201618 août 2019 WordPress > Tutoriels WordPress

Utiliser l’API Google Maps avec ACF dans votre administration WordPress

Si vous utilisez le champ Google Maps de l'extension Advanced Custom Fields, il est dorénavant nécessaire d'obtenir une clé d'API auprès de Google pour chacun de vos projets Web.

La dernière version de ACF prend en compte cette modification en proposant un filtre afin d’injecter votre clé sur la partie back-office de WordPress. Sans cette clé, Google Maps ne fonctionnera pas et affichera un cadre blanc.

Cette information s’applique aux nouveaux sites déployés et non aux anciens. Toutefois, je vous recommande vivement de générer des clés d’API Google Maps pour l’ensemble de vos projets Web afin de pallier à toute éventualité. Si vous vérifiez votre console JavaScript à partir des outils de développement de votre navigateur favori, il y a de fortes chances que vous obteniez les messages d’erreurs suivants :

"Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys"
"Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required"

Pour obtenir cette fameuse clé, suivez simplement les instructions de Google. Elles sont très simples à comprendre et rédigées en français. Pas de panique donc !

Cas n°1 – Avec ACF PRO

Dans un mu-plugins de préférence ou votre fichier functions.php présent dans votre thème, copiez ces lignes de code :

/* ACF Google Maps */
function wpc_acf_init() {
acf_update_setting('google_api_key', 'VOTRE_CLE_ICI');
}
add_action('acf/init', 'wpc_acf_init');

Remplacez VOTRE_CLE_ICI par la clé obtenue auprès de Google puis enregistrez le fichier.

Cas n°2 – Avec ACF version gratuite

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

Une fois la clé renseignée, Google Maps sera de nouveau opérationnelle en back-office et votre console JavaScript n’affichera plus de messages d’erreurs.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

9 commentaires

SébastienSerre - Il y a 4 ans
Salut Aurélien, Merci pour cette astuce. jusque la je suivais ce tuto http://www.aliciaramirez.com/2015/02/advanced-custom-fields-google-maps-tutorial/ pour intégrer la carte en front.
A Quel niveau dois ajouter la clé API penses tu?
Répondre
1. Aurélien Denis auteur de l’article - Il y a 4 ans
  Au niveau du enqueue_script() tu rajoutes &key=TA_CLE. 😉
  Répondre
  1. sebastienserre - Il y a 4 ans
    Merci 😉
    Répondre
  2. Aglae361 - Il y a 4 ans
    Désolée pas encore au top dans les insertion 🙁
    Tu rajoute cela comment exactement ?
    wp_enqueue_script( ‘google-map’, ‘https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false’, array(), ‘3’, true );
    wp_enqueue_script( ‘google-map-init’, get_template_directory_uri() . ‘/lib/google-maps.js’, array(‘google-map’, ‘jquery’), ‘0.1’, true );
    wp_enqueue_script(‘google_api_key’, ‘AIzaSyAckdB04Mmtg69N-sQBmFjSsMbXQOdsCiI’);
    Les 2 premières lignes viennent du code issu de la page http://www.aliciaramirez.com/2015/02/advanced-custom-fields-google-maps-tutorial/
    J’ai crée mon fichier js (dans le dossier lib de mon thème, à la racine et l’ai appelé google-maps.js)
    J’ai créer ces wp_enqueue_script dans le fichier perso (perso-fonctions.php) que je rajoute au theme pour pas qu’il se fasse écraser en cas de mise à jour. Mon fichier perso-fonctions.php se trouve à la racine du theme
    J’ai bon ?
    Répondre
    1. Aurélien Denis auteur de l’article - Il y a 4 ans
      Bonjour,
      les instructions dans le tutoriel indiquent qu’il faut soit créer un mu-plugins, soit insérer le code dans functions.php de ton thème. 😉
      Répondre
      1. Aglae361 - Il y a 4 ans
        Ben oui, j’ai vu mais étant donné que je suis avec Genesis et que j’utilise un theme enfant de Genesis (agency-pro), si je le met dans functions.php lorsque le thème enfant de Genesis va être mis à jour, je vais tout perdre, non ?
        Du coup, dans functions.php j’ai fait
        require_once( get_stylesheet_directory() . ‘/lib/perso-fonctions.php’ );
        car j’ai mis perso-fonctions.php dans un dossier lib à la racine du thème agency-pro.
        Dans perso-fonctions.php j’ai mis le code suivant :
        function my_theme_add_scripts() {
        wp_enqueue_script( ‘google-map-init’, get_template_directory_uri() . ‘/lib/google-maps.js’, array(‘google-map’, ‘jquery’), ‘0.1’, true );
        acf_update_setting(‘google_api_key’, ‘AIzaSyAckdB04Mmtg69N-sQBmFjSsMbXQOdsCiI’);
        }
        et dans google-maps.js (qui se trouve aussi dans le dossier lib à la racine du thème agency-pro) j’ai /* issu de http://www.aliciaramirez.com/2015/02/advanced-custom-fields-google-maps-tutorial/ */
        http://pastebin.com/Dzj4amPw
        Du coup il me semble que j’ai bon.
        Par contre je reste avec un rectangle blanc à la place de mon plan. Donc un truc ne vas pas.
      2. Aurélien Denis auteur de l’article - Il y a 4 ans
        Il faut vérifier les erreurs JS qui pourraient apparaitre. Je ne connais pas le fonctionnement de Genesis mais la logique d’un thème enfant est que justement on puisse y injecter des fonctions personnelles…
EtienneSteven - Il y a 4 ans
Salut Aurélien !
Merci pour ce tuto pour afficher la carte dans le BackOffice..
Je l’ai d’affiché, également dans le FrontOffice…
Mais alors en revanche : IMPOSSIBLE d’effectuer une recherche d’une adresse dans la barre de recherche du ACF !!
:O
As-tu une idée ?
En te remerciant.
Répondre
1. Aurélien Denis auteur de l’article - Il y a 4 ans
  Hello, il te faut vérifier ta console JS dans les outils de développement de ton navigateur afin d’identifier une éventuelle erreur.
  Répondre