Comment fonctionne le widget ?

1. Architecture technique

Le widget repose sur trois composants :

Intégration Google Maps dans ServiceNow : Visualisation des sites (cmn_location)

2. Prérequis et configuration

Pour déployer ce widget :

Côté ServiceNow

1. Table cmn_location :

   • Vérifiez que les champs latitude, longitude, et cmn_location_type sont remplis.

   • Utilisez des données géocodées (via l’API Google Geocoding ou un outil tiers).

2. Portail ou Page :

   • Ajoutez le widget à un portail ServiceNow (ex. : Facility Management, IT Operations).

   • Assurez-vous que les utilisateurs ont les droits de lecture sur cmn_location.

Côté Google Cloud

1. Projet Google Cloud :

   • Créez un projet et activez l’API Maps JavaScript.

   • Générez une clé API (restreinte à votre domaine ServiceNow pour la sécurité).

2. Bibliothèques requises :

   • maps.googleapis.com/maps/api/js (avec libraries=maps,marker).

   • @googlemaps/markerclusterer pour le clustering.

3. Style de carte (optionnel) :

   • Utilisez un mapId pour appliquer un style personnalisé (via Google Cloud Console).

3. Étapes clés du fonctionnement

a. Récupération des données (Server Script)

Le script côté serveur :

1. Interroge la table cmn_location pour récupérer :

   • Le nom du site (name).

   • Ses coordonnées (latitude, longitude).

   • Son type (cmn_location_type, ex. : "Bureau", "Entrepôt").

2. Filtre les enregistrements valides (coordonnées non nulles).

3. Transmet les données au frontend via data.locations.

// Exemple de données retournées
data.locations = [
  {
    label: "Siège Social - Bordeaux",
    latitude: 44.833328,
    longitude: -0.56667,
    type: "Bureau"
  },
  // ...
];

b. Initialisation de la carte (Client Controller)

api.controller = function ($scope) {
  var c = this;
  var googleApiKey = "YOUR GOOGLE API KEY";

  function loadGoogleMaps(apiKey, callback) {
    if (window.google && window.google.maps && google.maps.marker &&
      google.maps.marker.AdvancedMarkerElement
    ) {
      callback();
      return;
    }

    if (window._googleMapsLoading) {
      setTimeout(function () {
        loadGoogleMaps(apiKey, callback);
      }, 100);
      return;
    }
    
    window._googleMapsLoading = true;

    var script = document.createElement("script");
    script.src = "https://maps.googleapis.com/maps/api/js?key=" + apiKey + "&v=beta&libraries=maps,marker";
    script.async = true;
    script.defer = true;
    script.onload = function () {
      var clusterScript = document.createElement("script");
      clusterScript.src = "https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js";
      clusterScript.onload = function () {
        var checkReady = setInterval(function () {
          if (
            google.maps.Map &&
            google.maps.marker &&
            google.maps.marker.AdvancedMarkerElement && window.markerClusterer
          ) {
            clearInterval(checkReady);
            callback();
          }
        }, 100);
      };
      document.head.appendChild(clusterScript);
    };
    document.head.appendChild(script);
  }

  function initMap() {
    var defaultCenter = { lat: 44.833328, lng: -0.56667 }; // By default the map is centered to Bordeaux

    var map = new google.maps.Map(document.getElementById("map"), {
      center: defaultCenter,
      zoom: 1,
      mapId: “XXX-XX-XXX”, // Your Google Project ID
    });
    //map.setOptions({ minZoom: 2 });
    var bounds = new google.maps.LatLngBounds();

    var markers = [];
		var infoWindow = new google.maps.InfoWindow();
    if (c.data.locations && c.data.locations.length > 0) {
      c.data.locations.forEach(function (location) {
        var pinElement = new google.maps.marker.PinElement({
          background: "#05C3DD",
          borderColor: "#FFFFFF",
          glyphColor: "#3B2E2E",
          glyph: "●",
        });

        var marker = new google.maps.marker.AdvancedMarkerElement({
          position: { lat: location.latitude, lng: location.longitude },
          map: map,
          title: location.label,
          content: pinElement.element,
        });
        
        marker.addListener('click', function() {
          var content = "<strong>" + Type + "</strong><br>" + location.type;
          infoWindow.setContent(content); 
          infoWindow.open({
            map: map,
            anchor: marker
          });
		});

        markers.push(marker);
        bounds.extend({ lat: location.latitude, lng: location.longitude });
      });

      var markerCluster = new markerClusterer.MarkerClusterer({
        markers: markers,
        map: map
      });
      map.fitBounds(bounds);
    }
  }
  
  loadGoogleMaps(googleApiKey, function () {
    initMap();
  });
};

1. Chargement dynamique de l’API Google Maps :

   • Vérifie si l’API est déjà chargée pour éviter les doublons.

   • Charge les bibliothèques nécessaires (maps, marker, markerclusterer).

   • Utilise une clé API Google Cloud pour l’authentification.

2. Création de la carte :

   • Centre la carte sur un point par défaut (ex. : Bordeaux).

   • Applique un style personnalisé (via mapId pour les projets Google Cloud Premium).

3. Affichage des marqueurs :

   • Pour chaque site dans data.locations, crée un marqueur avancé (AdvancedMarkerElement) avec :

     • Une icône personnalisée (cercle bleu dans l’exemple).

     • Une infobulle (InfoWindow) affichant le nom et le type du site au clic.

   • Regroupe les marqueurs proches avec MarkerClusterer pour éviter la surcharge visuelle.

4. Ajustement automatique du zoom :

   • La carte s’ajuste (fitBounds) pour afficher tous les marqueurs dès le chargement.

c. Fonctionnalités avancées

<div style="padding:0;">
  <div id="map" style="height: 400px; width: 100%; border: none;"></div>
</div>

4. Fonctionnalités avancées

Personnalisations possibles

Pour adapter le widget à vos besoins :

Bonnes pratiques

1. Sécurité :

   • Restreignez la clé API Google à votre domaine ServiceNow.

   • Évitez d’exposer les données sensibles dans les infobulles.

2. Performance :

   • Limitez le nombre de marqueurs affichés (ex. : 500 max).

   • Utilisez le clustering pour les cartes avec beaucoup de points.

3. Maintenance :

   • Vérifiez régulièrement que les coordonnées dans cmn_location sont à jour.

   • Testez le widget après les mises à jour de ServiceNow ou de l’API Google Maps.

Ce widget est facile à déployer et offre un retour sur investissement rapide pour les organisations gérant des actifs géolocalisés.

Cas d’usage en IT (Informatique et Gestion des Services)

1. Gestion des Incidents et des Pannes

Objectif : Visualiser en temps réel les incidents IT par localisation pour prioriser les interventions. Données à afficher :

• Marqueurs : Sites impactés par un incident (couleur rouge pour les incidents critiques, orange pour les majeurs).

• Infobulles : Détails de l’incident (numéro de ticket, description, temps de résolution estimé).

• Clusters : Regroupement des incidents par région pour identifier les zones à risque. Bénéfices :

• Réduction du temps de résolution grâce à une allocation optimisée des techniciens.

• Identification des zones récurrentes de pannes (ex. : un datacenter avec des problèmes réseau fréquents).

Exemple :

Un incident réseau affecte plusieurs sites en Île-de-France. La carte permet de voir que 3 sites proches sont impactés et d’envoyer une équipe unique pour résoudre le problème.

2. Supervision des Équipements et du Réseau

Objectif : Surveiller l’état des équipements IT (serveurs, routeurs, points d’accès Wi-Fi) géolocalisés. Données à afficher:

• Marqueurs :

  • Vert : Équipement opérationnel.

  • Rouge : Équipement en panne.

  • Jaune : Équipement en maintenance.

• Lignes : Connexions réseau entre les sites (ex. : liens VPN ou fibres optiques).

• Couches : Superposition de cartes thermiques pour visualiser la charge réseau ou CPU. Bénéfices :

• Détection rapide des goulots d’étranglement dans le réseau.

• Planification des maintenances en fonction de la localisation.

Exemple :

Un routeur en panne à Lyon perturbe 5 sites. La carte permet de rediriger le trafic vers un routeur de secours à Grenoble en attendant la réparation.

3. Gestion des Actifs IT (ITAM)

Objectif : Localiser les actifs IT (ordinateurs, imprimantes, serveurs) et leur statut (ex. : en service, en stock, en réparation). Données à afficher :

• Marqueurs : Emplacement des actifs avec une icône spécifique par type (ex. : 🖥️ pour les PC, 🖨️ pour les imprimantes).

• Filtrage : Par statut (ex. : "À recycler", "En fin de vie").

• Historique : Afficher les déplacements des actifs (ex. : un PC transféré de Paris à Bordeaux). Bénéfices :

• Réduction des pertes d’actifs grâce à un suivi géographique.

• Optimisation des stocks de rechange en identifiant les sites sur-équipés ou sous-équipés.

Exemple :

Un parc d’imprimantes est sous-utilisé à Marseille. La carte permet de les redéployer vers un site à Toulouse où la demande est forte.

4. Cybersécurité et Détection des Menaces

Objectif : Cartographier les tentatives d’intrusion ou les appareils infectés par localisation. Données à afficher :

• Marqueurs : Sites où des attaques ont été détectées (ex. : phishing, malware).

• Alertes : Notifications en temps réel pour les nouvelles menaces.

• Heatmap : Zones à haut risque (ex. : concentration d’attaques en Europe de l’Est). Bénéfices :

• Identification des modèles géographiques d’attaques (ex. : attaques ciblées sur un pays).

• Priorisation des actions de sécurité pour les sites les plus exposés.

Exemple :

Plusieurs tentatives de phishing sont détectées sur des utilisateurs basés à Berlin. La carte permet de déclencher une campagne de sensibilisation ciblée pour ce site.

5. Déploiement de Mises à Jour Logicielles

Objectif : Suivre le déploiement de correctifs ou de nouvelles versions logicielles par site. Données à afficher :

• Marqueurs :

  • Vert : Mise à jour déployée.

  • Rouge : Échec du déploiement.

  • Gris : Déploiement en cours.

• Progression : Pourcentage de déploiement par région. Bénéfices :

• Identification rapide des sites en retard pour les mises à jour critiques.

• Planification des fenêtres de maintenance par fuseau horaire.

Exemple :

Une mise à jour de sécurité doit être déployée sur tous les sites. La carte montre que l’Amérique du Nord est à jour, mais que l’Asie a des échecs. Une équipe est mobilisée pour résoudre les problèmes.

6. Gestion des Datacenters et du Cloud

Objectif : Visualiser les datacenters (physiques ou cloud) et leur utilisation. Données à afficher :

• Marqueurs : Emplacement des datacenters avec leur statut (ex. : "Plein", "Disponible").

• Capacité : Pourcentage d’utilisation des ressources (CPU, stockage).

• Liens : Connexions entre datacenters (latence, bande passante). Bénéfices :

• Optimisation de la répartition de charge entre les datacenters.

• Planification des extensions ou des migrations vers le cloud.

Exemple :

Un datacenter à Francfort est saturé. La carte permet de rediriger de nouvelles instances vers un datacenter sous-utilisé à Amsterdam.