Tutoriels

Intégrer une Google Map sans extension dans WordPress

Il existe beaucoup de solutions pour intégrer une carte Google dans vos contenus WordPress. Aujourd’hui nous allons voir une solution basée sur un champs Gmap d’Advanced Custom Field (ACF). Cet article est une traduction du tutoriel d’Alicia Ramirez.

Ce tutoriel est basé sur l’utilisation de l’excellentissime extension Advanced Custom Field car elle est utilisée sur la totalité de mes développement et très simple à mettre en oeuvre.

Étape 0: Obtenir une clé API Google Map.

Avant de pouvoir utiliser Google Maps, il va falloir obtenir une clé API Google Map. Vous pouvez  utiliser l’API Standard qui autorise 25000 affichage de carte par jour) ou si vous avez beaucoup de trafic, vous devrez opter pour un plan Premium.

Étape 1: Ajouter du CSS

Coller ce code dans votre feuille de style (style.css) ou ailleurs si vous le pensez plus approprié.

.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}
style.css

Étape 2: Création d’un script Javascript initialisant la carte.

Copiez / collez ce code dans un fichier gmap.js que vous pourrez stocker dans un dossier de votre thème. Pour l’exemple nous prendrons library/js.

(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$el (jQuery element)
*  @return	n/a
*/

function render_map( $el ) {

	// var
	var $markers = $el.find('.marker');

	// vars
	var args = {
		zoom		: 16,
		center		: new google.maps.LatLng(0, 0),
		mapTypeId	: google.maps.MapTypeId.ROADMAP
	};

	// create map	        	
	var map = new google.maps.Map( $el[0], args);

	// add a markers reference
	map.markers = [];

	// add markers
	$markers.each(function(){

    	add_marker( $(this), map );

	});

	// center map
	center_map( map );

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$marker (jQuery element)
*  @param	map (Google Map object)
*  @return	n/a
*/

function add_marker( $marker, map ) {

	// var
	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

	// create marker
	var marker = new google.maps.Marker({
		position	: latlng,
		map			: map
	});

	// add to array
	map.markers.push( marker );

	// if marker contains HTML, add it to an infoWindow
	if( $marker.html() )
	{
		// create info window
		var infowindow = new google.maps.InfoWindow({
			content		: $marker.html()
		});

		// show info window when marker is clicked
		google.maps.event.addListener(marker, 'click', function() {

			infowindow.open( map, marker );

		});
	}

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	map (Google Map object)
*  @return	n/a
*/

function center_map( map ) {

	// vars
	var bounds = new google.maps.LatLngBounds();

	// loop through all markers and create bounds
	$.each( map.markers, function( i, marker ){

		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

		bounds.extend( latlng );

	});

	// only 1 marker?
	if( map.markers.length == 1 )
	{
		// set center of map
	    map.setCenter( bounds.getCenter() );
	    map.setZoom( 16 );
	}
	else
	{
		// fit to bounds
		map.fitBounds( bounds );
	}

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type	function
*  @date	8/11/2013
*  @since	5.0.0
*
*  @param	n/a
*  @return	n/a
*/

$(document).ready(function(){

	$('.acf-map').each(function(){

		render_map( $(this) );

	});

});

})(jQuery);
gmap.js

Étape 3: Chargement des scripts par WordPress

Maintenant, il vous faut charger les scripts précédemment créé lors du chargement de WordPress. Vous pourriez coller les liens dans le header.php de votre thème… mais ce n’est vraiment pas une bonne pratique WordPress. Nous allons utiliser la fonction dédiée de WordPress : wp_enqueue_script()

A Lire Aussi:  Pré-remplir un formulaire Gravity Form avec des paramètres d'URL

Dans votre functions.php de votre thème, ajoutez le code suivant:

function my_theme_add_scripts() {
	wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=XXXXX', array(), '3', true );
	wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/library/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );
}

add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );

function my_acf_google_map_api( $api ){
	
	$api['key'] = 'XXXX';
	
	return $api;
	
}

add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
functions.php

Aux lignes 2 et 10, remplacez “XXXX” par votre clé API Google Map.

À la ligne 3, assurez vous d’avoir saisi le chemin vers le script JS  créé à l’étape 2.

Étape 3 – Bonus

Si vous ne voulez charger votre carte que sur certaines page, par exemple la page “Contact”, vous pouvez modifier le code comme ceci:

function my_theme_add_scripts() {
    if (is_page('contact')) {
        wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key="XXXX', array(), '3', true );
        wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/library/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );
    }
}

add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );

Étape 4: Affichage de la carte

Dans votre template de page, là ou vous désirez voir la carte, insérez ce code dans la Boucle:

<?php 

$location = get_field('location');

if( !empty($location) ):
?>
<div class="acf-map">
	<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>

Assurez vous de bien modifier le nom du champs ACF Google Map. Ici on a utilisé “location” dans get_field('location');.

Conclusion:

Vous venez d’ajouter une carte Gmap dans votre thème WordPress sans utiliser aucune extension. Notez que vous pouvez vous passer d’ACF si vous désirez saisir “en dur” les coordonnées GPS d’un lieu. Il vous suffira d’adapter les valeurs de data-lat et data-lng

A Propos de l'auteur

Avatar - Sebastien Serre

Sebastien Serre

Passionné par le web depuis la fin des années 1990, j'ai développé au fil des ans des compétences en matière de création web. Créant des sites internet sous WordPress depuis 2006 et développant exclusivement sur Wordpress depuis 2014. Je créerai le site ou l'extension WordPress dont vous avez besoin. Développeur d'extensions, Contributeur au Core, Modérateur sur le forum WPFR, responsable de traduction WordPress et orateur lors de WordCamp, ma vie est rythmée par WordPress.

2 commentaires

  1. Bonjour,

    Votre tutoriel est très bien fait. Je me pose la question de savoir quel est la meilleure solution entre votre proposition ou la simple intégration, où l’on veut, du code fourni par Google :

    Quelle est la méthode la plus efficiente de votre point de vue ?
    Cordialement.

  2. Bonjour Michel,
    Merci pour votre commentaire.
    Je préfère cette méthode qui évite les iframes de Google. Ici vous avez le choix du markup HTML ce qui vous permet de réaliser exactement ce que vous désirez comme rendu et de le modifier à vitre convenance.
    Bonne journée

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.