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 :
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 :
Remplacez VOTRE_CLE_ICI par la clé obtenue auprès de Google puis enregistrez le fichier.
Cas n°2 – Avec ACF version gratuite
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.
SébastienSerre
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?
Aurélien Denis auteur de l’article
Au niveau du
enqueue_script()tu rajoutes&key=TA_CLE.sebastienserre
Merci
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 ?
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.
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.
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…
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 !!
As-tu une idée ?
En te remerciant.
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.