Pierre

5 décembre 2015
w

Des questions ?

Besoin de prendre contact, de présenter votre projet ?

w

Contactez-moi !

Je serai heureux de répondre à toutes vos questions.

Contact

Changement d’icone dans une carte Google map avec le thème Divi

Divi | 4 commentaires

Régulièrement pour le site Internet de mes clients, je personnalise l’icone indiquant l’emplacement de leur entreprise sur une carte Google map. La manip est relativement simple à implémenter et j’aimerai la partager avec vous :). Vous pouvez voir un exemple concret ici (ouverture dans une nouvelle fenêtre). Pour cela, il existe 2 solutions : la plus […]
Google map Dommiers

Régulièrement pour le site Internet de mes clients, je personnalise l’icone indiquant l’emplacement de leur entreprise sur une carte Google map. La manip est relativement simple à implémenter et j’aimerai la partager avec vous :).

Vous pouvez voir un exemple concret ici (ouverture dans une nouvelle fenêtre).

Pour cela, il existe 2 solutions :

  1. la plus simple, comme vous vous servez du thème Divi, est de remplacer l’icone « marker.png » que vous trouverez dans le dossier « Divi » -> « includes » -> « builder » -> « images » par la votre.
  2. la plus « compliquée » mais que, pour ma part, je trouve plus propre, est d’éditer le fichier .htaccess qui se trouve (normalement) à la racine de votre site internet.

Localisez la balise que WordPress à créé lors de son installation et qui commence par « # BEGIN WordPress » :

Cela devrait se présenter comme ceci pour une installation « standard » :

# BEGIN WordPress
<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.php$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.php [L]
 #changement de l'icone du marker de Google maps :)...
 RewriteRule ^wp-content/themes/Divi/includes/builder/images/marker.png$ /wp-content/themes/tips/images/Tips.png [L]
</IfModule>
# END WordPress

Vous aurez noté la présence de la dernière ligne qui demande que toutes les requêtes des navigateurs demandant une url pointant vers le fichier « marker.png » soit redirigées vers  » /wp-content/themes/tips/images/Tips.png ».

A vous de remplacer cette URL par la vôtre et d’afficher ainsi l’icône que vous souhaitez 🙂 !

Petite info importante pour ceux qui utilisent un CDN local comme expliqué ici, le fichier .htaccess que vous devrez modifier sera celui qui se trouve dans le dossier wp-content. Dans ce cas il faudra ajouter à la fin de celui-ci le code suivant :

<IfModule mod_rewrite.c>
RewriteEngine On
#changement de l'icone du marker de Google maps :)...
RewriteRule ^themes/Divi/includes/builder/images/marker.png$ /themes/tips/images/Tips.png [L]
</IfModule>

Vous aurez noté que les références au dossier « wp-content » ont disparu puisque notre CDN local fait pointer notre sous-domaine vers ce même dossier :).

Information : Utilisateur convaincu depuis de nombreuses années par ce thème, je suis inscrit en tant qu’affilié sur le site d’elegant themes. Ainsi en cliquant sur le logo ci-dessous, vous bénéficierez d’une remise de 10% sur l’achat du thème et si vous l’achetez, je recevrai une commission :).

4 Commentaires

  1. Bonjour,

    Tout d’abord merci pour votre article.
    J’ai suivi vos instructions mais malheureusement cela ne fonctionne pas.
    Dans l’exemple que vous citez (https://tips2a.fr/backstage/contact/), je remarque également que le marqueur est celui de Divi et non le vôtre.
    Savez-vous pourquoi ?
    Vous en remerciant par avance,
    Aude

    • Bonjour Aude :).

      Bon, alors-là, je ne sais pas si c’est la fatigue ou peut-être un petit manque de clarté dans ta requête mais j’avoue ne rien comprendre à ta question :)…
      Peux-tu, stp, être plus claire ?

      Amicalement,

      Pierre.

  2. Bonjour,
    Merci pour cette petite astuce.
    Je cherche à pouvoir intégrer différents marqueurs personnalisés sur une même carte…
    Vous n’auriez pas une solution ?
    Merci,

    • Bonjour Ijahseb 🙂 !

      Il est impossible en l’état actuel de faire ce que tu souhaites. Du moins pas sans l’utilisation d’un plugin. Je te suggère le plugin « Map Extended Module » (https://diviwebdesign.com/store/divi-custom-modules/map-extended-module/) qui, pour 8 €, remplira parfaitement la fonction que tu décris ;).
      Passe une belle soirée 😀 !

      Amicalement,

      Pierre.