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
<!-- Map WebAcappella --> <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" /> <script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script> <link rel="stylesheet" type="text/css" href="plugins/mapWebacappella/css/style.css" /> <!-- Map WebAcappella -->
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)
<div id="map"></div> <script type='text/javascript' src='plugins/mapWebacappella/js/style.js'></script>
É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 !
Bonjour, et si il y a bien une alternative gratuite et FRANCAISE en plus avec la possibilité de présenter sa carte comme vous le souhaitez. https://www.geoportail.gouv.fr/
Il suffit de s’inscrire et c’est à vous de jouer.
Bonjour !
Ça ne fonctionne pas. Je ne comprends pas où je dois dézipper le dossier “plugins”. Dans le Program Files de l’installation de webacappella ou bien dans le dossier où se situent les différents projets de création des sites ?
Bonjour,
Pareil ça ne fonctionne pas.
1 – Copie du code HTML dans la page; OK
2 – Copie du code HTML dans un bloc HTML à l’endroit où je veux voir apparaître la carte; OK
3 – Téléchargement et dézippage. Une fois dézippé, c’est le bazar… Je suis sous Windows, je déduis que je dois copier le dossier //plugin-map-webacappella/Plugin Map Webacappella/plugins à la racine de mon site Web. Je prends mon FileZilla préfére, et je copie le dossier “plugins” à la racine du site, à côté des nombreux dossiers “wa_xxxxxxxxx”.
=> Pour infos, le fichier ZIP contient aussi un dossier //plugin-map-webacappella/__MACOSX/Plugin Map Webacappella/plugins … Ce n’est pas le même ? Et pourquoi avoir autant imbriqué les sous-sous-sous-dossiers… ? Bref.
4 – Ensuite, vous proposez de modifier les fichiers ? N’aurait-il pas été plus judicieux de le faire AVANT de les poser sur le serveur ? Dont acte, je modifie les fichiers styles.js et style.css après avoir récupéré les bonnes coordonnées, et je RE-fais un transfert des fichiers sur le serveur.
5 – Publication, effacement du cache du navigateur, et… rien. Pas de carte qui apparaît. J’ai manqué quelque chose ?
Merci tonton.
Bonjour Franck,
c’est le dossier plugins (avec son contenu) que vous devez déposer sur votre serveur. À la racine, la ou se trouve les autres fichier webacappella “wa_xxxxx”
Bien cordialement
Bonjour,
J’ai installé ce plugin en alternative aux nouvelles limites de google map.
Il serait intéressant d’intégrer cette nouvelle méthode à une future mise à jour de l’application elle-même (en remplacement de la fonction native de google map !!)
En revanche, je bloque sur la possibilité d’incorporer 2 plans sur la même page?? Cela est-il possible?
Si oui, pouvez-vous m’indiquer comment faire?
J’avais vu un plugin à la vente sur le site permettant de faire cela mais étant basé sur Google map, il a été retiré de la vente…
Avez-vous quelque chose du même genre à proposer?
Dans l’attente de votre retour, je vous remercie par avance.
Cordialement,
Bonjour, tout d’abord merci pour vos nombreux tutos. Pour ce dernier je n’arrive pas a le faire fonctionner. Le tuto est il toujours valide? le répertoire doit il être placé à la racine du projet ou des répertoires projet. Quand on insert un code html dans la page, y a t il une taille de case à respecter? Faut il mettre le dans une box ou une ligne? Qu’est que j’aurais pu oublier d’autre?
MERCI