TutorielsAlternative gratuite à Google Maps (plugin)

Alternative gratuite à Google Maps (plugin)

Alors cette Google Maps ? Elle est bien hein ? Elle vous plait, vous en avez bien profité pendant 10 ans ? Et bien maintenant c’est payant !

Depuis le 16 juillet 2018, Google a mis en place sa nouvelle politique tarifaire pour Google Maps. (Oui Régis, ils ont fait ça pendant l’été, comme les politiciens).

Désormais, votre clef API gratuite ne permet pas d’afficher plus de 28000 fois par mois la carte (avant c’était 25000 fois par jour). Passé ce quota, il vous faut prendre un Pack de vues. Plusieurs Packs sont disponibles, à des prix différents et ça commence à 1000 vues supplémentaires. La grille tarifaire est disponible juste ici

Évidemment, pour beaucoup d’entre vous, la carte Google Maps est un petit plus pas vraiment indispensable et qui ne mérite certainement pas qu’on paye.

Je vous propose donc aujourd’hui une alternative gratuite à Google Maps très simple à installer. Il vous faudra cependant faire le deuil du design ultra célèbre de la Google Maps, et pour l’instant, aucune solution gratuite n’est disponible pour customiser le design.

Voici à quoi cela ressemble : Prévisualiser

Nous allons utiliser les solutions open source « Open Street Map » et « Leaflet« 

Étape 1

Copiez le code suivant et collez le dans le code HTML personnalisé des paramètre de la page où vous souhaitez afficher la carte

 

Ensuite copiez le code suivant et collez le dans un élément HTML que vous placerez où vous le souhaitez sur votre page (en mode box étendue ou non, à vous de voir)

 

Étape 2

A présent, téléchargez le fichier .zip du dossier plugins, décompressez-le et déposez le dossier plugins sur votre serveur à la racine (là où se trouvent vos fichiers et dossiers WebAcappella).

Si vous avez déjà un dossier « plugins » sur votre serveur, ne déposez que le contenu de celui-ci à l’intérieur du dossier plugins présent sur votre serveur.

Le dossier mapWebacappella contient : un dossier css, un dossier js et un dossier markers.

Le dossier markers contient déjà tout un jeu de markers que vous pouvez réutiliser ou remplacer par votre propre marker.

Étape 3

Personnalisation du plugin

Commencez par récupérer les coordonnées GPS de l’adresse que vous souhaitez afficher sur la carte. Pour cela, rendez vous ici : www.coordonnees-gps.fr

Maintenant, ouvrez le fichier style.js qui se trouve dans le dossier js (pugins => mapWebacappella => js) avec un éditeur de code comme Sublime text par exemple.

  • À la ligne 4, renseignez la latitude
  • Ligne 5, renseignez la longitude
  • Ligne 11, vous avez la valeur 15 qui correspond à la valeur du zoom par défaut de la carte, vous pouvez modifier cette valeur
  • Ligne 17, renseignez une valeur minimum du zoom (vous pouvez aussi laissez celle là)
  • Ligne 18, renseignez une valeur maximum du zoom (vous pouvez aussi laissez celle là)
  • Ligne 22, renseignez le nom du marker que vous souhaitez afficher (ce marker doit se trouver dans le dossier markers)
  • Ligne 23, renseignez la hauteur et la largeur du marker

Ouvrez à présent le fichier style.css qui se trouve dans le dossier css (pugins => mapWebacappella => css)

  • Ligne 6, modifiez la hauteur de la carte
  • Ligne 8, vous pouvez appliquer des bords arrondis à la carte
  • Ligne 9, renseignez une épaisseur et une couleur de bordure

Vous pouvez maintenant publier votre site et profiter du résultat !

Si toutefois vous ne souhaitez pas publier votre site et voir quand même le résultat, voici une petite technique : Voir le résultat final d’un plugin sans publier son site web

Bisous les neveux !

 

1 Commentaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Publier un commentaire