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

Par Aurélien Denis le 20 juillet 2016, mis à jour il y a 1 an
9 commentaires
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.

Ces tutoriels devraient vous intéresser…
9 commentaires
  1. EtienneSteven

    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

      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
    1. Aurélien Denis auteur de l’article

      Au niveau du enqueue_script() tu rajoutes &key=TA_CLE. 😉

      Répondre
      1. sebastienserre

        Merci 😉

        Répondre
      2. Aglae361

        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

          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

            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 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…

Laisser un commentaire