API Google Maps dans un composant React personnalisé

Introduction

Ajoutez un composant React à la page de liste des comptes, spécialement conçu pour afficher une Google Maps où des repères intégrés montrent l’emplacement de chaque Account.

Étapes à suivre

1. Créer un nouveau module pour Google Maps

Commencez par créer un nouveau module. Dans cet exemple, il s’appelle « GoogleMaps ». Ensuite, copiez sa valeur de module, car elle sera utilisée à l’étape 3. Cela se fait simplement en cliquant dessus, dans la section supérieure de la page du module.

2. Créer un Aggregate temporaire et une Entity

Créez un Aggregate « temporary » (il sera supprimé après la création de l’Entity, à l’étape 3)

Créez une Entity « GoogleMaps » sous l’Aggregate temporaire. Depuis le properties panel, définissez le base type sur « component ». Ensuite, ajoutez un attribut de type text (string), mettez « moduleId » comme nom et collez la valeur de module copiée à l’étape 1. À partir de ce moment, le composant réutilisable « Google Maps » sera dans la toolbox, mais ne fonctionnera pas tant que le code Javascript n’aura pas été ajouté.

3. Ajouter le code JavaScript pour l’API Google Maps

Pour ajouter le code Javascript, copiez et collez ce code dans le module nouvellement créé (de l’étape 1) et enregistrez la modification. Pour en savoir plus sur ce que fait chaque section du code, consultez la dernière section de ce guide.

Insérez une clé Google à la ligne 84.

5.  import React, { useEffect, useState } from "react";
6.  import Box from "@esm/components/web/Box";
7.
8.  const calculateCenterAndZoom = (objects) => {
9.    if (objects.length === 1) {
10.      const { latitude, longitude } = objects[0];
11.      return {
12.        center: { lat: Number(latitude), lng: Number(longitude) },
13.        zoom: 5,
14.      };
15.    }
16.
17.    let minLat = Infinity;
18.    let maxLat = -Infinity;
19.    let minLng = Infinity;
20.    let maxLng = -Infinity;
21.
22.    objects.forEach((object) => {
23.      const { latitude, longitude } = object;
24.      minLat = Math.min(minLat, Number(latitude));
25.      maxLat = Math.max(maxLat, Number(latitude));
26.      minLng = Math.min(minLng, Number(longitude));
27.      maxLng = Math.max(maxLng, Number(longitude));
28.    });
29.
30.    const centerLat = (maxLat + minLat) / 2;
31.    const centerLng = (maxLng + minLng) / 2;
32.
33.    // Calculer la distance de chaque point par rapport au centre
34.    const distancesFromCenter = objects.map(object => {
35.      return Math.sqrt(
36.        Math.pow(Number(object.latitude) - centerLat, 2) +
37.        Math.pow(Number(object.longitude) - centerLng, 2)
38.      );
39.    });
40.
41.    // Prendre une distance "cible" (dans cet exemple, la distance moyenne)
42.    const avgDistanceFromCenter = distancesFromCenter.reduce((sum, d) => sum + d, 0) / distancesFromCenter.length;
43.
44.    // Ajustez le zoom en fonction de cette distance cible
45.    const zoom = Math.floor(Math.log2(360 / avgDistanceFromCenter) - 1);
46.
47.    return {
48.      center: { lat: centerLat, lng: centerLng },
49.      zoom: zoom,
50.    };
51.  };
52.
53.  const GoogleMaps = React.memo(({ data, ...props }) => {
54.    const [objects, setObjects] = useState([]);
55.
56.    useEffect(() => {
57.      const handleDataGeocoding = () => {
58.        const geocoder = new window.google.maps.Geocoder();
59.
60.        data.forEach((object) => {
61.          const address = `${object.streetAddress}, ${object.zipCode}, ${object.city}, ${object.stateOrProvince}, ${object.country}`;
62.          geocoder.geocode({ address }, (results, status) => {
63.            if (status === "OK") {
64.              setObjects((prevObjects) => [
65.                ...prevObjects,
66.                {
67.                  latitude: results[0].geometry.location.lat(),
68.                  longitude: results[0].geometry.location.lng(),
69.                  name: object.name,
70.                },
71.              ]);
72.            } else {
73.              console.error("Geocode error:", status);
74.            }
75.          });
76.        });
77.      };
78.
79.      if (window.google && window.google.maps) {
80.        // Le script Google Maps est déjà chargé
81.        handleDataGeocoding();
82.      } else {
83.        const script = document.createElement("script");
84.        script.src = `https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;
85.        script.async = true;
86.        script.defer = true;
87.        document.head.appendChild(script);
88.
89.        script.onload = handleDataGeocoding;
90.      }
91.    }, [data]);
92.
93.    useEffect(() => {
94.      if (objects.length > 0) {
95.        const { center, zoom } = calculateCenterAndZoom(objects);
96.
97.        const map = new window.google.maps.Map(document.getElementById("map"), {
98.          zoomControl: true,
99.          mapTypeControl: true,
100.          streetViewControl: true,
101.          fullscreenControl: true,
102.          center: center,
103.          zoom: zoom,
104.        });
105.
106.        objects.forEach((object) => {
107.          const { latitude, longitude, name } = object;
108.
109.          const marker = new window.google.maps.Marker({
110.            position: { lat: Number(latitude), lng: Number(longitude) },
111.            map: map,
112.            title: name,
113.          });
114.        });
115.      }
116.    }, [objects]);
117.
118.    return (
119.      <Box>
120.        <div id="map" style={{ width: "100%", height: "350px" }}></div>
121.        <Box {...props}></Box>
122.      </Box>
123.    );
124.  });
125.
126.  export default GoogleMaps;

4. Ajouter le composant Google Maps à l’interface utilisateur

Glissez-déposez le composant Google Map de la toolbox vers l’interface utilisateur de votre page. Un message d’erreur indiquant « cannot read properties of undefined » s’affichera. Ajoutez simplement un comportement « Set Component Data », de type search Account pour le supprimer et générer la carte.

5. Décomposition du code JavaScript

CalculateCenterAndZoom :

Cette fonctionnalité définit la focalisation de la carte selon les adresses des Accounts. Par exemple, si un seul Account a une adresse, le zoom sera de niveau 5, avec la carte bien centrée sur le repère. Contrairement à un scénario à adresses multiples, où la carte prend alors en considération les coordonnées max et min et établit un point central.

const calculateCenterAndZoom = (objects) => {
  if (objects.length === 1) {
    const { latitude, longitude } = objects[0];
    return {
      center: { lat: Number(latitude), lng: Number(longitude) },
      zoom: 5,
    };
  }
  let minLat = Infinity;
  let maxLat = -Infinity;
  let minLng = Infinity;
  let maxLng = -Infinity;
  objects.forEach((object) => {
    const { latitude, longitude } = object;
    minLat = Math.min(minLat, Number(latitude));
    maxLat = Math.max(maxLat, Number(latitude));
    minLng = Math.min(minLng, Number(longitude));
    maxLng = Math.max(maxLng, Number(longitude));
  });
  const centerLat = (maxLat + minLat) / 2;
  const centerLng = (maxLng + minLng) / 2;
  // Calculer la distance de chaque point par rapport au centre
  const distancesFromCenter = objects.map(object => {
    return Math.sqrt(
      Math.pow(Number(object.latitude) - centerLat, 2) +
      Math.pow(Number(object.longitude) - centerLng, 2)
    );
  });
  // Prendre une distance "cible" (dans cet exemple, la distance moyenne)
  const avgDistanceFromCenter = distancesFromCenter.reduce((sum, d) => sum + d, 0) / distancesFromCenter.length;
  // Ajustez le zoom en fonction de cette distance cible
  const zoom = Math.floor(Math.log2(360 / avgDistanceFromCenter) - 1);
  return {
    center: { lat: centerLat, lng: centerLng },
    zoom: zoom,
  };
};

GoogleMaps :

C’est le cœur du code. Il stocke les coordonnées géographiques obtenues via « data » en utilisant Geocoding, puis convertit les adresses en points de latitude et longitude.

useEffect(() => {
    const handleDataGeocoding = () => {
      const geocoder = new window.google.maps.Geocoder();

      data.forEach((object) => {
        const address = `${object.streetAddress}, ${object.zipCode}, ${object.city}, ${object.stateOrProvince}, ${object.country}`;
        geocoder.geocode({ address }, (results, status) => {
          if (status === "OK") {
            setObjects((prevObjects) => [
              ...prevObjects,
              {
                latitude: results[0].geometry.location.lat(),
                longitude: results[0].geometry.location.lng(),
                name: object.name,
              },
            ]);
          } else {
            console.error("Geocode error:", status);
          }
        });
      });
    };

    if (window.google && window.google.maps) {
      // Le script Google Maps est déjà chargé
      handleDataGeocoding();
    } else {
      const script = document.createElement("script");
      script.src = `https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      script.async = true;
      script.defer = true;
      document.head.appendChild(script);

      script.onload = handleDataGeocoding;
    }
  }, [data]);

Et avec cette section, la carte sera initialisée avec le zoom et le centre appropriés, et créera des repères pour chaque emplacement :

useEffect(() => {
    if (objects.length > 0) {
      const { center, zoom } = calculateCenterAndZoom(objects);

      const map = new window.google.maps.Map(document.getElementById("map"), {
        zoomControl: true,
        mapTypeControl: true,
        streetViewControl: true,
        fullscreenControl: true,
        center: center,
        zoom: zoom,
      });

      objects.forEach((object) => {
        const { latitude, longitude, name } = object;

        const marker = new window.google.maps.Marker({
          position: { lat: Number(latitude), lng: Number(longitude) },
          map: map,
          title: name,
        });
      });
    }
  }, [objects]);

Conclusion

Ce guide explique comment intégrer l’API Google Maps dans un composant React personnalisé. Il décrit la configuration du module, l’ajout de l’API nécessaire et la gestion du geocoding des adresses de compte pour afficher des repères sur la carte. En suivant ces étapes, les utilisateurs peuvent créer un affichage cartographique entièrement fonctionnel avec des emplacements basés sur les données de compte.