Afficher les images et les annotations

Ce produit ou cette fonctionnalité est en phase expérimentale (pré-DG). La prise en charge des fonctionnalités et produits pré-DG peut être limitée, et il se peut que les modifications apportées à ces fonctionnalités ou produits ne soient pas compatibles avec d'autres versions pré-DG. Les offres en pré-DG sont couvertes par les Conditions spécifiques du service Google Maps Platform. Pour en savoir plus, consultez les descriptions des étapes de lancement.

Développeurs de l'Espace économique européen (EEE)

Si votre adresse de facturation se trouve dans l'Espace économique européen, les Conditions d'utilisation de Google Maps Platform pour l'EEE s'appliqueront à votre utilisation des Services à compter du 8 juillet 2025. La fonctionnalité varie selon la région. En savoir plus.

Le point de terminaison SearchDestinations de l'API Geocoding fournit un contexte hyperlocal, y compris des points de navigation et des entrées. Pour améliorer l'expérience utilisateur, la réponse peut inclure des paramètres pour l'API Street View Static, ce qui vous permet d'afficher des images pertinentes pour ces lieux.

Important : Cette fonctionnalité est disponible dans le canal v4alpha.

Demander des images et des annotations

Pour recevoir des informations sur les images et les annotations, vous devez inclure les champs suivants dans l'en-tête X-Goog-FieldMask :

• destinations.navigationPoints.streetViewThumbnail
• destinations.navigationPoints.entranceAnnotation
• destinations.entrances.streetViewThumbnail
• destinations.entrances.streetViewAnnotation

Exemple de requête cURL

curl -X POST -d '{
  "place": "places/ChIJkU89GL9ZwokRvVjWDQzhaNg"
}' \
-H 'Content-Type: application/json' \
-H "X-Goog-Api-Key: API_KEY" \
-H "X-Goog-FieldMask: destinations.navigationPoints.streetViewThumbnail,destinations.navigationPoints.entranceAnnotation,destinations.entrances.streetViewThumbnail,destinations.entrances.streetViewAnnotation" \
https://geocode.googleapis.com/v4alpha/geocode/destinations

Exemple de réponse JSON

{
  "destinations": [
    {
      "entrances": [
        {
          "location": {
            "latitude": 40.7406763,
            "longitude": -74.0020733
          },
          "tags": [
            "PREFERRED"
          ],
          "place": "places/ChIJkU89GL9ZwokRvVjWDQzhaNg",
          "streetViewThumbnail": {
            "pano": "EUKaIR67fBVmpsHnXuIevA",
            "widthPx": 400,
            "heightPx": 600,
            "headingDegree": 331.06186,
            "fovDegree": 60
          },
          "streetViewAnnotation": {
            "coordinates": [
              {
                "xPx": 184.7,
                "yPx": 290.4
              },
              {
                "xPx": 213.3,
                "yPx": 289.4
              },
              {
                "xPx": 214.8,
                "yPx": 330.8
              },
              {
                "xPx": 186.0,
                "yPx": 332.5
              }
            ]
          }
        }
      ]
    }
  ]
}

Champs mis en avant

Les objets Entrance et NavigationPoint de la réponse peuvent contenir un champ streetViewThumbnail avec les champs suivants :

Champ	Description	Paramètre de l'API Static
pano	ID d'un panorama spécifique.	pano
widthPx	Largeur suggérée pour l'image.	size (partie de la largeur)
heightPx	Hauteur suggérée pour l'image.	size (partie de la hauteur)
headingDegree	Direction de la boussole de l'appareil photo (0-360).	heading
pitchDegree	Angle de l'appareil photo de haut en bas (-90 à 90).	pitch
fovDegree	Champ de vision horizontal (0-120).	fov

Demander une image

Pour demander une image Street View, utilisez les valeurs de l'streetViewThumbnail objet pour créer une URL pour l' API Street View Static.

Exemple d'URL

Voici un exemple d'URL de l'API Street View Static construite :

https://maps.googleapis.com/maps/api/streetview?size=400x600&pano=EUKaIR67fBVmpsHnXuIevA&heading=331.06186&fov=60&key=API_KEY&signature=YOUR_SIGNATURE

Exemple de code : TypeScript

La fonction TypeScript suivante montre comment construire l'URL de l'API Static Street View à partir de la sortie du point de terminaison Destinations.

interface StreetViewThumbnail {
  pano: string;
  widthPx: number;
  heightPx: number;
  headingDegree: number;
  pitchDegree: number;
  fovDegree: number;
}

function getStreetViewUrl(thumbnail: StreetViewThumbnail, apiKey: string): string {
  const params = new URLSearchParams({
    size: `${thumbnail.widthPx}x${thumbnail.heightPx}`,
    pano: thumbnail.pano,
    heading: thumbnail.headingDegree.toString(),
    pitch: thumbnail.pitchDegree.toString(),
    fov: thumbnail.fovDegree.toString(),
    key: apiKey,
  });

  return `https://maps.googleapis.com/maps/api/streetview?${params.toString()}`;
}

Annotations d'image

Si une Entrance ou un NavigationPoint est renvoyé, il peut également inclure une annotation d'image de l'entrée correspondante dans le champ streetViewAnnotation ou entranceAnnotation. Cela fournit des coordonnées de pixels pour un polygone qui décrit l'entrée dans l'image miniature.

Ces annotations sont destinées au rendu côté client. Vous pouvez les utiliser pour dessiner une superposition (par exemple, à l'aide de SVG ou d'un <canvas>) sur l'image renvoyée par l'API Static.

Remarque : À titre d'exception limitée à l'interdiction d'utiliser du contenu Google Maps pour créer du contenu, le client peut utiliser les coordonnées fournies par la réponse de destination de Geocoding pour délimiter visuellement les entrées de bâtiment conformément à cette documentation.

Système de coordonnées d'annotation

L'origine (0,0) correspond à l'angle supérieur gauche de l'image.

• xPx : distance horizontale par rapport au bord gauche.
• yPx : distance verticale par rapport au bord supérieur.

Pour vous assurer que le polygone est correctement aligné, vous devez demander l'image à l'API Static à l'aide de la size spécifiée par widthPx et heightPx.

Exemple de code : Dessiner des annotations (TypeScript et SVG)

Cet exemple montre comment utiliser TypeScript et SVG pour superposer le polygone d'annotation d'entrée sur l'image Street View.

TypeScript

interface Coordinate {
  xPx: number;
  yPx: number;
}

interface StreetViewAnnotation {
  coordinates: Coordinate[];
}

function drawAnnotations(annotation: StreetViewAnnotation, width: number, height: number) {
  const svg = document.getElementById('annotation-overlay') as unknown as SVGSVGElement;
  const polygon = document.getElementById('entrance-polygon') as unknown as SVGPolygonElement;

  // Set SVG dimensions to match the image
  svg.setAttribute('width', width.toString());
  svg.setAttribute('height', height.toString());
  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);

  // Construct points string for the polygon
  const points = annotation.coordinates
    .map(coord => `${coord.xPx},${coord.yPx}`)
    .join(' ');

  polygon.setAttribute('points', points);
}

// Example usage:
const annotation = {
  coordinates: [
    {xPx: 184.7, yPx: 290.4},
    {xPx: 213.3, yPx: 289.4},
    {xPx: 214.8, yPx: 330.8},
    {xPx: 186.0, yPx: 332.5}
  ]
};
drawAnnotations(annotation, 400, 600);

HTML

<div style="position: relative; display: inline-block;">
  <!-- The Street View image from the previous step -->
  <img id="street-view-image" src="STREET_VIEW_IMAGE" alt="Street View" style="display: block;">

  <!-- SVG overlay for annotations -->
  <svg id="annotation-overlay" style="position: absolute; top: 0; left: 0; pointer-events: none;">
    <polygon id="entrance-polygon" points="" style="fill:rgba(0, 255, 17, 0.3);stroke:rgba(0, 255, 17, 0.9);stroke-width:3" />
  </svg>
</div>

Le résultat doit ressembler à ceci :

Commentaires

Il s'agit d'une fonctionnalité expérimentale de l'API Geocoding. Nous vous serions reconnaissants de nous faire part de vos commentaires à l'adresse [e-mail].