Contrôles

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
Sélectionnez une plate-forme: Android iOS JavaScript

Présentation des commandes

Les cartes affichées via l'API Maps JavaScript contiennent des éléments d'interface utilisateur qui permettent à l'utilisateur d'interagir avec la carte. Ces éléments sont appelés commandes, et vous pouvez inclure des variantes de celles-ci dans votre application. Vous pouvez également ne rien faire et laisser l'API Maps JavaScript gérer tous les comportements de contrôle.

La carte suivante montre l'ensemble de commandes affiché par défaut par l'API Maps JavaScript:

Voici la liste de l'ensemble complet des commandes que vous pouvez utiliser dans vos cartes :

  • La commande de zoom affiche les boutons "+" et -- pour modifier le niveau de zoom de la carte. Cette commande s'affiche par défaut en bas à droite de la carte.
  • La commande "Type de carte" est disponible dans un menu déroulant ou dans une barre de boutons horizontale. Elle permet à l'utilisateur de choisir un type de carte (ROADMAP, SATELLITE, HYBRID ou TERRAIN). Elle apparaît par défaut dans l'angle supérieur gauche de la carte.
  • La commande Street View contient une icône Pegman qui peut être déplacée sur la carte pour activer Street View. Cette commande s'affiche par défaut en bas à droite de la carte.
  • La commande de rotation combine des options d'inclinaison et de rotation pour les cartes contenant des images obliques. Cette commande s'affiche par défaut en bas à droite de la carte. Pour en savoir plus, consultez la section Images à 45°.
  • La commande d'échelle affiche un élément d'échelle de carte. Cette commande est désactivée par défaut.
  • La commande Plein écran permet d'ouvrir la carte en mode plein écran. Cette option est activée par défaut sur les ordinateurs et les appareils mobiles. Remarque : iOS n'est pas compatible avec le mode plein écran. La commande plein écran n'est donc pas visible sur les appareils iOS.
  • La commande des raccourcis clavier affiche la liste des raccourcis clavier permettant d'interagir avec la carte.

Vous ne pouvez pas y accéder ni les modifier directement. À la place, vous modifiez les champs MapOptions de la carte qui affectent la visibilité et la présentation des commandes. Vous pouvez ajuster la présentation des commandes lors de l'instanciation de votre carte (avec les MapOptions appropriés) ou modifier une carte de manière dynamique en appelant setOptions() pour modifier les options de la carte.

Toutes ces commandes sont activées par défaut. Pour en savoir plus sur le comportement de l'interface utilisateur par défaut (et comment le modifier), consultez la section Interface utilisateur par défaut ci-dessous.

Interface utilisateur par défaut

Par défaut, toutes ces commandes disparaissent de la carte si celle-ci est trop petite (200 x 200 pixels). Vous pouvez ignorer ce comportement en définissant explicitement la commande pour qu'elle soit visible. Consultez la section Ajouter des commandes à la carte.

Le comportement et l'apparence des commandes sont identiques sur les appareils mobiles et les ordinateurs, à l'exception de la commande plein écran (voir le comportement décrit dans la liste des commandes).

En outre, la gestion du clavier est activée par défaut sur tous les appareils.

Désactiver l'interface utilisateur par défaut

Vous pouvez désactiver entièrement les boutons de l'interface utilisateur par défaut de l'API. Pour ce faire, définissez la propriété disableDefaultUI de la carte (dans l'objet MapOptions) sur true. Cette propriété désactive tous les boutons de commande de l'interface utilisateur de l'API Maps JavaScript. Toutefois, cela n'affecte pas les gestes de la souris ni les raccourcis clavier sur la carte de base, qui sont contrôlés respectivement par les propriétés gestureHandling et keyboardShortcuts.

Le code suivant désactive les boutons de l'interface utilisateur:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
Voir un exemple

Essayer l'exemple

Ajouter des commandes à la carte

Vous pouvez adapter votre interface en supprimant, ajoutant ou modifiant le comportement ou les commandes de l'interface utilisateur. Assurez-vous que les futures mises à jour n'auront pas d'incidence sur ce comportement. Si vous souhaitez uniquement ajouter ou modifier un comportement existant, vous devez vous assurer que la commande est explicitement ajoutée à votre application.

Certaines commandes apparaissent par défaut sur la carte, tandis que d'autres n'apparaissent que si vous les demandez spécifiquement. L'ajout ou la suppression de commandes dans la carte est spécifié dans les champs d'objet MapOptions suivants, que vous avez définis sur true pour les rendre visibles ou sur false pour les masquer:

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

Par défaut, toutes ces commandes disparaissent de la carte si celle-ci a une taille inférieure à 200 x 200 pixels. Vous pouvez ignorer ce comportement en définissant explicitement la commande pour qu'elle soit visible. Par exemple, le tableau suivant indique si la commande de zoom est visible ou non, en fonction de la taille de la carte et du paramètre du champ zoomControl:

Taille de la carte zoomControl Visible ?
Variable false Non
Variable true Yes
>= 200x200px undefined Yes
< 200x200px undefined Non

L'exemple suivant configure la carte pour masquer la commande de zoom et afficher la commande d'échelle. Notez que nous ne désactivons pas explicitement l'interface utilisateur par défaut. Ces modifications s'ajoutent donc au comportement par défaut de l'interface utilisateur.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;
Voir un exemple

Essayer l'exemple

Options de commande

Vous pouvez configurer plusieurs commandes pour modifier leur comportement ou leur apparence. La commande "Type de carte", par exemple, peut s'afficher sous la forme d'une barre horizontale ou d'un menu déroulant.

Ces commandes sont modifiées en modifiant les champs appropriés des options de contrôle dans l'objet MapOptions lors de la création de la carte.

Par exemple, les options permettant de modifier la commande"Type de carte"sont indiquées dans le champ mapTypeControlOptions. La commande "Type de carte" peut apparaître dans l'une des options style suivantes:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR affiche le tableau de commandes sous forme de boutons dans une barre horizontale, comme indiqué sur Google Maps.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU affiche une commande à un seul bouton vous permettant de sélectionner le type de carte via un menu déroulant.
  • google.maps.MapTypeControlStyle.DEFAULT affiche le comportement par défaut, qui dépend de la taille de l'écran et peut changer dans les futures versions de l'API.

Notez que si vous modifiez des options de contrôle, vous devez également activer explicitement le contrôle en définissant la valeur MapOptions appropriée sur true. Par exemple, pour définir une commande de type de carte afin d'exposer le style DROPDOWN_MENU, utilisez le code suivant dans l'objet MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

L'exemple suivant montre comment modifier la position et le style par défaut des commandes.

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;
Voir un exemple

Essayer l'exemple

Les commandes sont généralement configurées lors de la création de la carte. Toutefois, vous pouvez modifier la présentation des commandes de façon dynamique en appelant la méthode setOptions() de Map et en lui transmettant de nouvelles options de contrôle.

Modifier les commandes

Vous spécifiez une présentation de la commande lorsque vous créez votre carte à travers les champs de l'objet MapOptions de la carte. Ces champs sont indiqués ci-dessous:

  • zoomControl active/désactive la commande de zoom. Par défaut, cette commande est visible et apparaît en bas à droite de la carte. Le champ zoomControlOptions spécifie le ZoomControlOptions à utiliser pour cette commande.
  • mapTypeControl active/désactive la commande "Type de carte" qui permet à l'utilisateur de basculer entre les types de carte (par exemple, carte et satellite). Par défaut, cette commande est visible et apparaît en haut à gauche de la carte. Le champ mapTypeControlOptions spécifie également le champ MapTypeControlOptions à utiliser pour ce contrôle.
  • streetViewControl active/désactive la commande Pegman qui permet à l'utilisateur d'activer un panorama Street View. Par défaut, cette commande est visible et apparaît en bas à droite de la carte. Le champ streetViewControlOptions spécifie également le champ StreetViewControlOptions à utiliser pour ce contrôle.
  • rotateControl active/désactive l'apparence d'une commande de rotation pour contrôler l'orientation des images à 45°. Par défaut, la présence de la commande est déterminée par la présence ou l'absence d'images à 45° pour le type de carte donné au niveau de zoom et à la position actuels. Vous pouvez modifier le comportement de la commande en définissant le rotateControlOptions de la carte pour spécifier le RotateControlOptions à utiliser. Vous ne pouvez pas afficher la commande si aucune image à 45° n'est actuellement disponible.
  • scaleControl active/désactive la commande d'échelle qui fournit une échelle de carte simple. Cette commande n'est pas visible par défaut. Lorsque cette option est activée, elle apparaît toujours dans l'angle inférieur droit de la carte. Le champ scaleControlOptions spécifie également le champ ScaleControlOptions à utiliser pour ce contrôle.
  • fullscreenControl active/désactive la commande qui ouvre la carte en mode plein écran. Par défaut, ce paramètre est activé par défaut sur les ordinateurs et les appareils Android. Lorsqu'elle est activée, la commande apparaît près du coin supérieur droit de la carte. Le champ fullscreenControlOptions spécifie également le champ FullscreenControlOptions à utiliser pour ce contrôle.

Notez que vous pouvez spécifier des options pour des commandes que vous avez désactivées initialement.

Positionnement des commandes

La plupart des options de commande contiennent une propriété position (de type ControlPosition) qui indique où placer la commande sur la carte. Le positionnement de ces commandes n'est pas absolu. À la place, l'API disposera les commandes de manière intelligente, en les faisant tourner autour des éléments de carte existants ou d'autres commandes, selon les contraintes données (comme la taille de la carte).

Remarque: Il n'y a aucune garantie que les commandes ne se chevauchent pas en raison de mises en page complexes, bien que l'API tente de les organiser intelligemment.

Les positions de commande suivantes sont prises en charge :

  • TOP_CENTER indique que la commande doit être placée en haut au centre de la carte.
  • TOP_LEFT indique que la commande doit être placée en haut à gauche de la carte, et que tous les sous-éléments de la commande sont répartis vers le centre supérieur.
  • TOP_RIGHT indique que la commande doit être placée en haut à droite de la carte, et que tous les sous-éléments de la commande sont répartis vers le centre supérieur.
  • LEFT_TOP indique que la commande doit être placée en haut à gauche de la carte, mais en dessous de tout élément TOP_LEFT.
  • RIGHT_TOP indique que la commande doit être placée en haut à droite de la carte, mais en dessous de tout élément TOP_RIGHT.
  • LEFT_CENTER indique que la commande doit être placée sur le côté gauche de la carte, centrée entre les positions TOP_LEFT et BOTTOM_LEFT.
  • RIGHT_CENTER indique que la commande doit être placée sur le côté droit de la carte, centrée entre les positions TOP_RIGHT et BOTTOM_RIGHT.
  • LEFT_BOTTOM indique que la commande doit être placée en bas à gauche de la carte, mais au-dessus de tout élément BOTTOM_LEFT.
  • RIGHT_BOTTOM indique que la commande doit être placée en bas à droite de la carte, mais au-dessus de tout élément BOTTOM_RIGHT.
  • BOTTOM_CENTER indique que la commande doit être placée en bas au centre de la carte.
  • BOTTOM_LEFT indique que la commande doit être placée en bas à gauche de la carte, et que tous les sous-éléments de la commande sont répartis vers le centre inférieur.
  • BOTTOM_RIGHT indique que la commande doit être placée en bas à droite de la carte, et que tous les sous-éléments de la commande sont répartis vers le centre inférieur.

Notez que ces positions peuvent coïncider avec les positions des éléments de l'interface utilisateur dont vous ne pouvez pas modifier les emplacements (tels que les droits d'auteur et le logo Google). Dans ce cas, les commandes circulent selon la logique notée pour chaque position et apparaissent le plus près possible de la position indiquée.

L'exemple suivant montre une carte simple dans laquelle toutes les commandes sont activées, à différentes positions.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;
Voir un exemple

Essayer l'exemple

Commandes personnalisées

En plus de modifier le style et la position des commandes d'API existantes, vous pouvez créer vos propres commandes pour gérer les interactions avec l'utilisateur. Les commandes sont des widgets fixes qui flottent au-dessus d'une carte à des positions absolues, contrairement aux superpositions qui se déplacent avec la carte sous-jacente. Plus fondamentalement, une commande est un élément <div> qui a une position absolue sur la carte, affiche une interface utilisateur pour l'utilisateur et gère les interactions avec l'utilisateur ou la carte, généralement via un gestionnaire d'événements.

Pour créer votre commande personnalisée, quelques règles doivent être respectées. Toutefois, nous vous recommandons de suivre les consignes ci-dessous:

  • Définissez une feuille de style appropriée pour le ou les éléments de commande à afficher.
  • Gérez l'interaction avec l'utilisateur ou la carte via des gestionnaires d'événements pour les modifications de propriété de carte ou les événements utilisateur (par exemple, les événements 'click').
  • Créez un élément <div> pour conserver la commande, puis ajoutez-le à la propriété controls de Map.

Chacun de ces points est expliqué ci-après.

Créer des commandes personnalisées

Vous pouvez concevoir la commande comme vous le voulez. En règle générale, nous vous recommandons de placer toute votre présentation de contrôle dans un seul élément <div> afin de pouvoir manipuler votre commande comme une seule unité. Nous utilisons ce modèle de conception dans les échantillons ci-dessous.

La conception de contrôles attrayants nécessite certaines connaissances de la structure CSS et DOM. Le code suivant montre une fonction permettant de créer un élément de bouton permettant de centrer la carte sur Chicago.

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

Gestion des événements des commandes personnalisées

Pour qu'une commande soit utile, elle doit vraiment servir à quelque chose. C'est vous qui décidez des paramètres de contrôle. La commande peut répondre à l'entrée utilisateur ou à des modifications de l'état Map.

Pour répondre à l'entrée utilisateur, utilisez addEventListener(), qui gère les événements DOM compatibles. L'extrait de code suivant ajoute un écouteur pour l'événement 'click' du navigateur. Notez que cet événement est reçu depuis le DOM, pas la carte.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

Rendre les contrôles personnalisés accessibles

Pour vous assurer que les commandes reçoivent les événements du clavier et s'affichent correctement sur les lecteurs d'écran:

  • Utilisez toujours des éléments HTML natifs pour les boutons, les éléments de formulaire et les libellés. N'utilisez un élément DIV que comme conteneur pour des commandes natives. Ne réutilisez jamais un élément DIV comme élément interactif.
  • Utilisez l'élément label, l'attribut title ou l'attribut aria-label si nécessaire pour fournir des informations sur un élément de l'interface utilisateur.

Positionner des commandes personnalisées

Les commandes personnalisées sont positionnées sur la carte en les plaçant aux emplacements appropriés dans la propriété controls de l'objet Map. Cette propriété contient un tableau de google.maps.ControlPosition. Pour ajouter une commande personnalisée à la carte, ajoutez Node (généralement <div>) à un ControlPosition approprié. (Pour en savoir plus sur ces positions, consultez la section Positionnement des commandes ci-dessus.)

Chaque ControlPosition stocke un MVCArray des commandes affichées à cet emplacement. Par conséquent, lorsque des commandes sont ajoutées ou supprimées de la position, l'API met à jour les commandes en conséquence.

L'API place les commandes à chaque position selon l'ordre d'une propriété index. Les commandes ayant un index inférieur sont placées en premier. Par exemple, deux contrôles personnalisés à la position BOTTOM_RIGHT seront organisés selon cet ordre d'index, les valeurs d'index inférieures étant prioritaires. Par défaut, toutes les commandes personnalisées sont placées après l'ajout de commandes par défaut à l'API. Vous pouvez ignorer ce comportement en définissant une propriété index de contrôle sur une valeur négative. Vous ne pouvez pas placer de commandes personnalisées à gauche du logo ni à droite des droits d'auteur.

Le code suivant crée une commande personnalisée (son constructeur n'est pas affiché) et l'ajoute à la carte en position TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

Exemple de commande personnalisée

La commande suivante est simple (mais pas particulièrement utile) et combine les modèles présentés ci-dessus. Cette commande répond aux événements DOM 'click' en centrant la carte sur un emplacement par défaut spécifique:

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
Voir un exemple

Essayer l'exemple

Ajouter l'état aux commandes

Les commandes peuvent également stocker un état. L'exemple suivant est semblable à celui présenté précédemment, mais la commande contient un bouton "Définir la maison" supplémentaire qui permet de définir une nouvelle position pour la maison. Pour ce faire, nous créons une propriété home_ dans la commande permettant de stocker cet état, et nous fournissons des getters et des setters pour cet état.

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("div");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("div");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("div");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("div");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
Voir un exemple

Essayer l'exemple