Nous utilisons les cookies afin de fournir les services et fonctionnalités proposés sur notre site et afin d’améliorer l’expérience de nos utilisateurs. Pour plus d'informations nous vous invitons à consulter notre Politiques sur les cookies ainsi que notre Politique de confidentialité.

MagixMaps : Une classe JavaScript universelle pour Google Maps

J'ai le plaisir de vous présenter MagixMaps, une bibliothèque JavaScript "Vanilla" (sans dépendances) que j'ai conçue pour offrir une solution d'intégration Google Maps moderne, légère et surtout universelle.

Initialement développée pour les besoins de Magix CMS, cette classe a été entièrement isolée et repensée pour devenir un outil autonome, désormais disponible en Open Source pour tous vos projets web.

Une seule classe, une polyvalence absolue

La particularité de MagixMaps réside dans son architecture hybride. J'ai conçu cette classe pour qu'elle soit rigoureusement identique, qu'elle serve à vos utilisateurs finaux ou à vos outils de gestion interne. Elle s'adapte à votre contexte :

  • En Front-office : Elle devient un moteur interactif complet. Elle affiche vos points de vente, gère les interactions et calcule des itinéraires fluides avec un panneau responsive (mode tiroir sur mobile).

  • En Back-office (Administration) : Elle se transforme en assistant de saisie intelligent. En liant vos champs de formulaire (adresse, ville, CP) à l'instance, elle synchronise automatiquement les coordonnées GPS via le géocodage Google.

Cette approche "Single Class" vous garantit une maintenance simplifiée : une modification du noyau profite instantanément à l'ensemble de votre écosystème.

Pourquoi choisir MagixMaps ?

Contrairement aux intégrations classiques souvent lourdes ou dépendantes de bibliothèques tierces, MagixMaps mise sur la performance native :

  • Zéro dépendance : Du pur JavaScript (ES6+) compatible avec tous les environnements (PHP, frameworks JS, sites statiques).

  • Modernité : Support natif des Advanced Marker Elements de Google pour un rendu et des performances optimales.

  • Personnalisation CSS : L'identité visuelle est pilotée par des variables CSS (:root), permettant d'adapter les couleurs et dimensions sans toucher au JavaScript.

  • Expérience Mobile : Une interface pensée pour le tactile avec une gestion optimisée de l'affichage des directions.

Un projet Open Source tourné vers la communauté

J'ai choisi de distribuer MagixMaps sous double licence MIT et GPL v3. Mon objectif est de proposer un outil robuste qui puisse aussi bien servir des projets commerciaux que des plateformes communautaires.

Pour les développeurs, le dépôt GitHub est structuré selon les standards professionnels, incluant les sources (JS/LESS) et les versions de production optimisées avec leurs Source Maps pour un débogage précis.

MagixMaps est l'aboutissement d'une réflexion sur la productivité : coder moins, mais coder mieux. En utilisant la même logique pour l'affichage public et la gestion administrative, vous gagnez en temps et en fiabilité.

Le projet est dès à présent disponible sur GitHub. N'hésitez pas à l'explorer, à l'utiliser dans vos projets et à me faire part de vos retours !

Exemple de configuration simple :

const map = new MagixMaps({
    api_key: 'VOTRE_CLE_API',
    zoom: 14,
    markers: [{ 
        company: "Mon Entreprise", 
        address: "Rue de la Station, Huy", 
        lat: 50.52, 
        lng: 5.24 
    }]
});

Retrouvez le dépôt officiel ici : https://github.com/gtraxx/magixmaps

Thèmes :googlemap, vanillajs

Haut de la page