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.

3 commentaires

Laisser un commentaire