Si vous arrivez sur cette page, c’est que vous aimeriez savoir comment utiliser le plugin wordpress novo-map afin de créer de belles google maps personnalisées affichant vos articles votre blog wordpress. Sans plus attendre, passons tout de suite aux choses sérieuses 😉 .
Installation
Maintenant que Novo-Map se trouve sur WordPress, il ne vous faudra pas plus de 1 minute pour l’installer sur votre site.
- Dans le menu plugin de WordPress, cliquez sur “Ajouter” puis recherchez “Novo-Map” et cliquez sur “Installer”.
- Vous pouvez aussi simplement télécharger le fichier zip du plugin sur wordpress.org et l’uploader depuis le menu plugin de votre site ou encore directement uploader le plugin dans le dossier “/wp-content/plugins/” en utilisant FTP.
- Lorsque c’est fait, vous devriez voir Novo-Map dans vos plugins et il vous suffit de cliquer sur “activer”
Menu principal du plugin
Une fois le plugin activé, un nouveau menu “Novo-Map” devrait apparaître dans le menu de gauche de l’administration de votre site wordpress. Cliquez simplement sur “Novo-Map”.
Vous vous trouvez maintenant dans le menu principal du plugin qui vous permettra de créer et de customiser autant de google maps que vous voudrez insérer dans votre site. Je vais vous expliquer chaque partie du menu étape par étape (les menus du plugins sont encore en anglais pour l’instant mais seront bientôt disponibles en français)
Options de base
La 1ère étape indispensable consiste à créer votre clé API pour utiliser des google maps. Pour ce faire, cliquez simplement sur le lien “get an API key” et suivez les instructions de google (vous devrez obligatoirement enregistrer une méthode de paiement. Mais ne vous inquiétez pas, vous avez droit à 28’500 affichages de carte/mois gratuitement). Cela ne vous prendra pas plus de 2 minutes. Une fois que vous avez votre clé API, copiez la dans le champ de saisie et cliquez sur “Save API key”- Dans le menu déroulant situé juste en dessous, choisissez “Create a new Map”
Vous vous trouvez maintenant dans le menu principal de votre 1ère Novo-Map. Voyons maintenant ensemble chacune des options qui sont à votre disposition :
Map Name : C’est le nom que vous voulez donner à votre google map. Donnez lui un nom unique et qui décrit le contexte dans laquelle elle sera utilisée.- Map Width : la largeur de votre carte. Vous pouvez seulement la définir en % (par exemple “90%”) ou en pixels (par exemple “500px”). N’oubliez pas d’indiquer soit % ou px à côté de votre chiffre.
- Map Height : La hauteur de votre carte. Elle ne peut être définie qu’en pixels (par exemple “300px“).
- Center Latitude : La latitude du centre de la position par défaut de votre carte. Vous pouvez simplement cliquer sur la carte à droite du menu (sur la localisation que vous souhaitez) pour préremplir automatiquement ce champ.
- Center Longitude : La longitude du centre de la position par défaut de votre carte
- Default Zoom : le Zoom par défaut avec lequel sera affichée votre map. (Pour info 2 c’est grosso modo une vue du continent tandis que 10 c’est un zoom sur un quartier d’une ville).
- Map type control menu : Vous pouvez choisir d’ajouter un menu ou non sur votre google map qui vous permettra de facilement changer de type de carte. Vous pouvez aussi choisir l’emplacement de ce menu.
- Zoom button : Vous pouvez aussi ajouter un bouton pour permettre à vos lecteurs de zoomer plus facilement sur la carte. Vous pouvez aussi choisir l’emplacement de ce menu.
- Category : Ce menu défilant vous permet de choisir une catégorie d’articles que vous voulez montrer sur votre carte. Pour le moment, vous ne pouvez choisir qu’une seule catégorie ou un tag à la fois. Si vous voulez afficher tous vos articles, laissez simplement ce menu vide.
- Tag : Même principe que pour les catégories mais pour les articles possédant un tag spécifique.
- Map style :
La dernière grande zone de texte est très intéressante puisqu’elle vous permet de définir le style de votre map (par défaut, elle est préremplie avec le style que vous voyez dans la preview). Ne paniquez pas en voyant le charabia qui prérempli ce champ, il vous suffit de vous rendre par exemple sur Snazzy Maps, de vous balader à travers les milliers de styles déjà existant, d’en choisir un qui vous plaît, de copier le code JSON en entier dans la grande zone de texte du menu novo-map et c’est tout.
Si vous avez besoin d’un style personnalisé pour votre site, vous pouvez aussi facilement créer votre propre style sur Snazzy Maps ou encore google map style pour créer une google map parfaitement adaptée à votre blog. C’est par exemple ce qu’on a fait sur les pages catégories de notre blog novo-monde.
Une fois que vous aurez sauvegardé votre novo-map, vous pourrez voir en live dans la preview ce que donnera votre carte une fois insérée sur votre site.
Pin clustering (groupement de pins)
Le pin clustering est la fonctionnalité qui vous permet de faire en sorte que vos markers ne s’affichent pas les uns sur les autres lorsqu’ils sont situés proches l’un de l’autre. (Dans la catpure d’écran ci-dessus vous voyez quelques exemples où plusieurs articles sont regroupés (par exemple le 56 en Suisse). A la place, les markers trop proches sont automatiquement remplacé par un seul marker avec un numéro indiquant le nombre de markers rassemblés. Lorsque vous cliquez sur un marker avec un numéro, la carte zoome automatiquement pour vous montrer tous les markers rassemblés.
Pour activer cette fonctionnalité, il vous suffit de choisir “Yes” dans la 1ère option du menu et par défaut, tout devrait déjà fonctionner correctement. Voyons maintenant ensemble les différentes options du menu :
- Grid Size : C’est la taille du carré qui sert de référence pour rassembler les marqueurs qui sont proches les uns des autres. Plus ce paramètre sera grand, plus il y’aura de markers mis ensemble.
- Text Color : C’est la couleur du chiffre qui apparaît dans les markers.
- Menus des Markers : Vous voyez ensuite 3 menus similaire où vous pourrez définir si vous le souhaitez (les images par défaut fonctionnent très bien à mon avis) vos propres markers pour la fonctionnalité du clustering. S’il y’a 3 menus c’est parce qu’il y’a 3 tailles différentes… cad s’il y’a peu de markers mis ensemble, le marker choisi sera celui de gauche, s’il y’en a un peu plus, celui du milieu et s’il y’en a beaucoup, celui de droite. Cela permet d’avoir un effet visuel sympa pour voir rapidement où il y’a le plus de markers rassemblés. Voyons maintenant ensemble les paramètres :
- Select Marker : Nous reviendrons plus bas sur la création de markers mais si vous cliquez sur ce boutton vous verrez que vous pouvez déjà sélectionner quelques images disponibles par défaut. Gardez pour le moment l’image par défaut.
- Text Size : la taille du nombre qui est affiché dans le marker. L’idée est donc d’avoir un nombre affiché plus petit si le nombre de markers rassemblés est petit (12 pour un petit nombre de marker et 16 pour un grand nombre).
- Align X : sert à aligner le nombre avec le marquer dans l’axe horizontal (est utile si vous n’utilisez pas des markers symétriques)
- Align Y : Aligne le nombre dans l’axe vertical. Vous voyez que comme nos markers par défaut ne sont pas symétriques dans l’axe vertical, nous avons du régler ce paramètre pour que le nombre s’affiche bien au centre du marker.
Additional Marker (marker supplémentaire)
Cette fonctionnalité vous permet d’ajouter un marker supplémentaire sur votre google map pour par exemple indiquer votre position actuelle. Nous utilisons cette option sur notre blog de voyage car comme nous voyageons beaucoup, cela nous permet d’indiquer facilement à nos lecteurs où nous nous trouvons en live.
- Tout d’abord choisissez si oui ou non vous voulez afficher un marker supplémentaire. Cliquez sur “Yes” si vous le souhaitez.
- Title : Choisissez un titre pour votre marker comme par exemple “Nous nous trouvons en ce moment en Suisse” . Le titre sera affiché lorsque un lecteur passera son curseur sur le marker.
- Marker : Sélectionnez le marker que vous souhaitez utiliser parmi les markers disponibles (nous reviendrons plus bas sur la création de markers).
- Latitude / Longitude : Cliquez simplement sur la carte à droite sur l’endroit où vous souhaitez positionner le marker pour préremplir automatiquement ces 2 champs.
Additional Options (options supplémentaires)
- Load map scripts : Par défaut, laissez toujours cette option sur “Yes”. Pour les développeurs qui voudraient intégrer novo-map directement dans leurs thèmes, vous pourrez utiliser cette option pour plus de flexibilité (je reviendrai aussi sur ce point plus bas)
Une fois que vous aurez choisi toutes les options que vous souhaitez, cliquez sur “Create Map” pour sauvegarder votre nouvelle carte (qui apparaîtra maintenant dans la preview). Votre nouvelle google map est maintenant disponible dans le menu déroulant au début de la page avec le titre que vous lui avez donné. Si vous souhaitez créer une nouvelle novo-map, vous pouvez à nouveau sélectionner “Create a new map” et réitérer l’opération.
Géolocaliser ses articles ou pages
Alors créer un novo-map c’est bien joli mais il n’y a pour l’instant aucun pin affiché sur la carte. Mais pour pouvoir afficher vos articles sur une carte, vous devez d’abord les géolocaliser. Pour ce faire rien de plus simple, rendez vous sur le menu d’édition d’un article que vous souhaitez afficher sur votre carte. Au fond du menu d’édition, vous devriez avoir un nouveau menu “Novo-Map” qui ressemble à ça :
Par défaut le titre, l’image et la description sont prérempli avec votre titre d’article, votre featured image et votre extrait d’article si définit. Voyons ensemble les différents paramètres de ce menu :
- Title : C’est le titre du marker. Il sera affiché lorsqu’un lecteur passer son curseur sur le marker. Il est utilisé aussi comme titre de l’infobox avec un lien vers votre article (ou page)
- Marker : Choisissez simplement le marker que vous souhaitez pour cet article parmi ceux défini dans le menu des markers (nous reviendrons plus bas sur la création de markers).
- Latitude / Longitude : Cliquez simplement à l’emplacement souhaité sur la carte à droit pour préremplir ces 2 champs
- Image : L’image qui s’affiche à l’intérieur de l’infoboxe lorsqu’un visiteur clique sur le marker de l’article.
- Description : La description qui se trouve à l’intérieur de l’infoboxe. Vous pouvez y écrire ce que vous souhaitez, y ajouter des liens, des mots en caractères gras ou italiques…
Une fois les informations renseignées, vous pouvez simplement cliquer sur “Add Marker” pour géolocaliser cet article (ou page). Il ne vous reste plus qu’à réitérer cet opération pour tous les articles (ou pages) que vous souhaitez géolocaliser.
Markers Menu (menu des markers)
Je vous ai déjà dit plusieurs fois que je vous expliquerai comment créer vos propres markers afin que vous puissiez les utiliser pour vos articles, pour le marker clustering ou encore le marker additionel. Je vous rassure tout de suite, c’est très simple. Il vous suffit de vous rendre dans le sous menu “Markers” en dessous de “Novo-Map” que vous avez peut-être déjà vu plus tôt. Lorsque vous arrivez dans le menu des markers, cela devrait ressembler à l’image sur la droite.
Vous devriez reconnaitre les Markers par défaut que vous pouviez déjà utiliser dans les menu précédents. Maintenant, intéressons nous à la création de nouveaux Markers. Voici comment procéder :
- Vous devez d’abord choisir une image pour votre Marker. Vous pouvez choisir une image d’un marker déjà disponible avec le plugin (en cliquant sur choose from list) ou choisir votre propre image dans votre gallerie d’image wordpress en cliquant sur Add your own.
- Width / Height : la hauteur et la largeur avec laquelle sera affiché votre Marker sur votre novo-map cad que vous pouvez utiliser 2 fois la même image pour créer 2 Markers de taille différentes par exemple.
- Horizontal / Vertical align : alignement vertical et horizontal de votre Marker par rapport à la position exacte de la latitude et la longitude. Par exemple pour un pin classique, vous voudrez qu’il soit centré horizontalement et que la partie inférieure du pin (bottom) soit exactement sur la position.
- Une fois ces informations ajoutées, cliquez simplement sur “Add marker” et vous verrez apparaitre votre nouveau marker dans le menu.
Pour vous donner une idée, voici à quoi ressemble ce menu sur notre blog de voyage après avoir ajouté 6 Markers pour les articles et 3 spécifiques au marker clustering :
Quelques astuces pour créer de beaux markers
- Si vous utilisez des markers au formats .png, assurez vous que vos images soient 2 fois plus grande que la largeur et la hauteur définie du Marker. De cette manière, les markers auront une densité de pixels 2 fois plus grande donneront aussi bien sur les écrans rétina.
- Le meilleurs format d’image pour des Markers reste encore le format vectoriel ou .svg (qui rendent bien sur tous types d’écrans et toutes tailles). Malheureusement, pour des raisons de sécurité, WordPress n’autorise pas l’upload de ce type de fichier par défaut. Sur notre blog Novo-monde, nous utilisons des Markers au format .svg que nous pouvons mettre facilement dans la gallerie WordPress grâce au plugin Safe SVG que je vous recommande.
- Attention si vous créez vos propres Markers pour le clustering. Pour une raison indépendante de ma volonté, il est indispensable que les images choisies fassent la même largeur et hauteur que défini dans la définition Marker. Pour les .png ce n’est pas difficile à créer mais les images donneront moins bien sur les écrans rétina. Si vous utilisez des images vectorielles, vous devez impérativement définir le tag svg avec
width="50px" height="50px"pour un Marker définit avec une largeur et hauteur de 50px.
Afficher vos Novo-Map sur votre site
Il existe 4 façons d’afficher vos google maps sur votre site qui sont le bloc Gutenberg, le widget, les shortcodes ou de manière prgrammatique. Commençons par le widget.
Le bloc Gutenberg
Dans le nouvel éditeur de texte Gutenberg, vous pouvez facilement ajouter une map grace au bloc novo-map. Ce bloc vous permet de facilement choisir une map que vous avez créée auparavant. De plus le bloc vous permet de modifier quelques paramètres par défaut de votre map (un peu comme le shortcode). Ainsi, vous pourrez modifier la largeur, la hauteur, le zoom, le centre de la map, les menus… uniquement pour ce bloc en particulier. De plus, grace au nouvel éditeur de text de WordPress, vous verrez ces modifications s’afficher en temps réel dans votre éditeur.
Le widget
Le widget novo-map vous permet de facilement afficher une map définie à tout endroit où vous pouvez définir un widget. Pour ce faire, rendez vous simplement dans votre menu des widgets, ajouter le widget novo-map où vous le souhaitez et choisissez la carte que vous voulez afficher. Rien de plus 😉
Les Shortcodes
Vous avez peut-être remarqué qu’une fois que vous avez créé une nouvelle carte, un code pour un shortcode apparait au bas du menu de votre novo-map. Eh bien il vous suffit de copier ce code sur un de vos articles ou une de vos pages pour afficher cette carte. Facile non ?
Mais les shortcodes peuvent faire encore plus! Imaginez que vous ayez défini une cartes avec tous vos articles de blog. Vous voudriez afficher cette novo-map en grand dans un article et en petit dans votre sidebar. Mais peut-être que la latitude et la longitude du centre de la map n’est pas idéales dans les 2 cas, ou encore que le zoom par défaut n’est optimal pour les 2 cas… eh bien le shortcode a la solution puisqu’il vous permet de redéfinir certain paramètre. Par défaut vous utiliserez le shortcode de cette manière :
[novo-map id=1]
Mais vous pouvez rajouter encore d’autres paramètres en plus de l’id. Voici tous les paramètres disponibles :
[novo-map id=1 name="nouveauNom" width="500px" height="400px" category="catégorieID" tag="tagID" latitude="nouvelleLatitude" longitude="nouvelleLongitude" zoom="nouveauZoom"]
Si vous choisissez de redéfinir une categorie ou un tag, vous devez choisir l’un des deux car ils ne peuvent pas être définis simultanément.
Manière programmatique
Cette façon de faire s’adresse avant tout aux développeurs mais permet d’intégrer des cartes de manière complètement personnalisée dans votre thème wordpress (grâce au système de hooks de wordpress). D’ailleurs c’est la façon dont nous avons intégré novo-map sur toute nos pages catégories et qui nous a permis de définir une seule novo-map pour afficher toutes ces cartes sur notre site.
Premièrement, dans les options additionnelles du plugin novo-map, vous devez désactiver l’option “Load Scripts” en choisissant “No”. puis, vous pouvez ajouter votre novo-map en utilisant l’exemple suivant :
add_action('your_wordpress_hook', 'your_function_callback');
function your_function_callback() {
require_once WP_PLUGIN_DIR . '/novo-map/includes/class-novo-map-gmap.php';
require_once WP_PLUGIN_DIR . '/novo-map/includes/class-novo-map-gmap-manager.php';
global $wpdb;
$gmap_manager = new \Gmap_Manager($wpdb);
$gmap = $gmap_manager->get(IDofyourmap);
$gmap->set_category(categoryID);
$gmap->set_name('novomapname');
$gmap->set_latitude(latitude);
$gmap->set_longitude(longitude);
$gmap->set_zoom(newZoom);
echo '<div class="novomap-map-wrap"><div id="novomapname"></div></div>';
$gmap->enqueue_map('novo-map');
}
Tous les “setters” (set_…) sont optionels et permettent de changer certain paramètres avant de générer la map.
Filtres
novo_map_allowed_post_type: Si vous avez besoin de géolocaliser autre chose que des posts et des pages vous pouvez ajouter le menu de novo-map à vos Custom Post Type en ajoutant le filtre suivant dans le fichier functions.php de votre thème:
add_filter( 'novo_map_allowed_post_type', 'novo_map_post_types' );
function novo_map_post_types($types) {
$types = array( 'post', 'page', 'testimonial' );
return $types;
}
Remarques
Pour les personnes qui utilisaient l’ancienne version du plugin qui n’était disponible que sur notre site jusqu’en novembre 2017. Je vous invite à désactiver et désinstaller le plugin pour installer la nouvelle version disponible sur wordpress.org . Même si vous allez devoir redéfinir tous vos markers (on a du faire la même chose sur notre blog et ça nous a pris 2h à tout casser), la qualité du nouveau plugin est bien meilleure et vous bénéficierez des futures updates du plugin directement dans wordpress.
Conclusion
Voilà, vous savez à peu près tout sur cette toute nouvelle version du plugin novo-map. J’espère que grâce à ce manuel d’utilisation, vous arriverez à installer facilement le plugin sur votre site wordpress. Et pour toutes remarques, idées d’amélioration ou bug détectés, je vous invite à vous rendre sur la page du plugin sur wordpress pour créer un ticket dans le support du plugin. Si toutes les idées, bugs ou autres se trouvent au même endroit, ça me facilitera grandement la tache par la suite.
Et si vous aimez le plugin novo-map, je vous serait très reconnaissant si vous pouviez faire un donation pour nous aider à maintenir et à améliorer le plugin. Comme je l’ai déjà dit, faire une donation est un geste très important dans le monde de WordPress car cela encourage le développement de plugin gratuits et soutient le côté accessible / ouvert de la communauté wordpress.
Faites une donation pour le plugin novo-map
N’hésitez pas non plus à nous mettre 5 petites étoiles et à nous laisser un petit mot sur la page review du plugin. Ce petit geste tout simple nous fera super plaisir et contribuera à faire parler de Novo-Map sur la toile. Pour finir, on a écrit un article vous montrant tout ce que vous pouvez faire avec ce plugin.
Merci d’avance