Commandes

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 afin de permettre à l'utilisateur d'interagir avec la carte. Ces éléments sont appelés commandes et vous pouvez en inclure des variantes dans votre application. Vous pouvez également décider de ne rien faire et laisser l'API Maps JavaScript gérer la totalité du comportement des commandes.

La carte suivante montre l'ensemble de commandes par défaut affichées 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 apparaît par défaut dans l'angle inférieur droit de la carte.
• La commande de type de carte est disponible dans un menu déroulant ou sous forme de barre de boutons horizontale. Elle permet de choisir un type de carte (ROADMAP, SATELLITE, HYBRID ou TERRAIN). Cette commande apparaît par défaut dans l'angle supérieur gauche de la carte.
• La commande Street View contient une icône de Pegman qu'il est possible de glisser sur la carte pour activer Street View. Cette commande apparaît par défaut dans la partie inférieure droite de la carte.
• La commande de rotation offre une combinaison d'options d'inclinaison et de rotation pour les cartes contenant des images obliques. Cette commande apparaît par défaut dans la partie inférieure droite de la carte. Pour en savoir plus, consultez 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 de plein écran permet d'ouvrir la carte en mode plein écran. Cette commande 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 de plein écran n'est donc pas visible sur les appareils iOS.
• La commande de raccourcis clavier affiche la liste des raccourcis clavier permettant d'interagir avec la carte.

Vous ne pouvez pas directement modifier ou accéder à ces commandes. En revanche, vous pouvez modifier les champs MapOptions de la carte afin de jouer sur la visibilité et la présentation des commandes. Vous pouvez ajuster la présentation des commandes lorsque vous instanciez votre carte (avec les MapOptions appropriées) ou modifier une carte de manière dynamique en appelant setOptions() afin de modifier les options de la carte.

Ces commandes ne sont pas toutes activées par défaut. Pour en savoir plus sur le comportement de l'interface utilisateur par défaut (et comment modifier ce comportement), consultez Interface utilisateur par défaut.

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 annuler ce comportement en paramétrant explicitement cette commande afin de la rendre visible. Consultez Ajouter des commandes à la carte.

Le comportement et l'apparence des commandes sont les mêmes sur les appareils mobiles et les ordinateurs de bureau, à 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

Il est possible de 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, elle 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;
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

JavaScript

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

window.initMap = initMap;
index.js

Remarque : Le JavaScript est compilé à partir de l'extrait TypeScript.

Voir un exemple

Essayer avec un exemple

JSFiddle.net Google Cloud Shell

Ajouter des commandes à la carte

Vous pouvez personnaliser votre interface en supprimant, ajoutant ou modifiant le comportement ou les commandes de l'interface utilisateur. Vous pouvez également vous assurer que les mises à jour à venir n'auront pas d'impact sur ce comportement. Si vous souhaitez seulement ajouter ou modifier un comportement existant, vous devez veiller à ce que la commande soit ajoutée explicitement à votre application.

Certaines commandes sont affichées sur la carte par défaut tandis que d'autres n'apparaissent pas si vous n'en faites pas la demande spécifique. L'ajout ou la suppression de commandes de la carte sont spécifiés dans les champs suivants de l'objet MapOptions, que vous définissez 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 fait moins de 200 x 200 pixels. Vous pouvez annuler ce comportement en paramétrant explicitement cette commande afin de la rendre visible. Par exemple, le tableau suivant montre si la commande de zoom est visible ou pas en fonction de la taille de la carte et du paramétrage du champ zoomControl :

Taille de la carte	zoomControl	Visible ?
Toutes	false	Non
Toutes	true	Oui
>= 200 x 200 pixels	undefined	Oui
< 200 x 200 pixels	undefined	Non

Dans l'exemple suivant, la carte est paramétrée de manière à masquer la commande de zoom et à afficher la commande d'échelle. Notez que l'interface utilisateur par défaut n'est pas désactivée explicitement ; ces modifications viennent donc s'ajouter au comportement de l'interface utilisateur par défaut.

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;
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

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;
index.js

Remarque : Le JavaScript est compilé à partir de l'extrait TypeScript.

Voir un exemple

Essayer avec un exemple

JSFiddle.net Google Cloud Shell

Options de commande

Plusieurs options peuvent être configurées, ce qui vous permet de modifier leur comportement ou de changer leur apparence. La commande de type de carte, par exemple, peut apparaître sous forme de barre horizontale ou de menu déroulant.

Ces commandes sont modifiées en changeant les champs des options de commande dans l'objet MapOptions lors de la création de la carte.

Par exemple, les options qui modifient la commande de type de carte se trouvent dans le champ mapTypeControlOptions. La commande de type de carte peut apparaître dans l'une des options style suivantes :

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

Notez que si vous modifiez des options de commande, vous devez aussi activer la commande explicitement en définissant la valeur MapOptions appropriée sur true. Par exemple, pour paramétrer une commande de type de carte afin d'afficher 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;
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

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;
index.js

Remarque : Le JavaScript est compilé à partir de l'extrait TypeScript.

Voir un exemple

Essayer avec un exemple

JSFiddle.net Google Cloud Shell

Les commandes sont généralement configurées lors de la création de la carte. Cependant, vous pouvez modifier la présentation des commandes de manière dynamique en appelant la méthode setOptions() de Map et en spécifiant de nouvelles options.

Modifier les commandes

Vous spécifiez la présentation d'une commande lorsque vous créez votre carte grâce à des champs se trouvant dans l'objet MapOptions de la carte. Ces champs sont décrits ci-dessous :

• zoomControl active/désactive la commande de zoom. Par défaut, cette commande est visible et apparaît dans la partie inférieure droite de la carte. Le champ zoomControlOptions spécifie également les ZoomControlOptions à utiliser pour cette commande.
• mapTypeControl active/désactive la commande de type de carte qui permet à l'utilisateur de basculer entre les différents types de carte (comme Map et Satellite). Par défaut, cette commande est visible et apparaît dans l'angle supérieur gauche de la carte. Le champ mapTypeControlOptions spécifie en outre les options MapTypeControlOptions à utiliser pour cette commande.
• 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 dans la partie inférieure droite de la carte. Le champ streetViewControlOptions spécifie en outre les options StreetViewControlOptions à utiliser pour cette commande.
• rotateControl active/désactive l'affichage de la commande de rotation permettant de contrôler l'orientation des images à 45°. Par défaut, l'affichage de la commande est déterminé par la présence ou l'absence d'images à 45° pour le type de carte donné au niveau de zoom et au lieux actuels. Vous pouvez modifier le comportement de la commande en définissant les rotateControlOptions de la carte pour spécifier les RotateControlOptions à utiliser. Vous ne pouvez pas afficher la commande si aucune image à 45° n'est disponible actuellement.
• scaleControl active/désactive la commande d'échelle qui fournit une échelle de carte simple. Cette commande n'est pas visible par défaut. Lorsqu'elle est activée, elle apparaît toujours dans l'angle inférieur droit de la carte. Les scaleControlOptions spécifient en outre les ScaleControlOptions à utiliser pour cette commande.
• fullscreenControl active/désactive la commande qui ouvre la carte en mode plein écran. Par défaut, elle est activée 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. Les fullscreenControlOptions spécifient en outre les FullscreenControlOptions à utiliser pour cette commande.

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 (du type ControlPosition) qui indique où placer la commande sur la carte. Le positionnement de ces commandes n'est pas absolu. L'API les positionnera donc de manière intelligente autour des éléments existants sur la carte, ou des autres commandes, dans les limites données (comme la taille de la carte).

Remarque : Bien que l'API tente de les organiser de manière intelligente, il n'est pas garanti que les commandes ne se chevauchent pas en cas de disposition compliquée.

Voici les positions de commande acceptées :

• 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 ses sous-éléments 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 ses sous-éléments sont répartis vers le centre inférieur.

Notez que ces positions peuvent coïncider avec celles des éléments de l'interface utilisateur dont vous ne pouvez pas modifier l'emplacement (droits d'auteur et logo Google, par exemple). Dans ce cas, les commandes sont réparties selon la logique notée pour chaque position et apparaissent aussi près que possible de leur position indiquée.

L'exemple suivant montre une carte simple où toutes les commandes sont activées à des positions différentes.

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;
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

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;
index.js

Remarque : Le JavaScript est compilé à partir de l'extrait TypeScript.

Voir un exemple

Essayer avec un exemple

JSFiddle.net Google Cloud Shell

Commandes personnalisées

Outre la modification du style et de la position des commandes d'API existantes, vous pouvez créer vos propres commandes afin de gérer les interactions avec l'utilisateur. Les commandes sont des widgets fixes qui flottent en haut d'une carte à une position absolue, par opposition aux superpositions, qui se déplacent avec la carte en dessous d'elles. Fondamentalement, une commande est simplement un élément <div> ayant une position absolue sur la carte, qui affiche une partie de l'interface à l'utilisateur et gère les interactions avec celui-ci ou avec 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. Les recommandations ci-dessous peuvent servir de bonnes pratiques :

• Définissez une feuille de style appropriée pour le ou les éléments de commande à afficher.
• Gérez les interactions avec l'utilisateur ou avec 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> qui contiendra la commande, puis ajoutez cet élément à 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. Nous recommandons généralement de placer toute la présentation de votre commande 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 commandes esthétiques nécessite de connaître les structures CSS et DOM. Le code suivant montre une fonction permettant de créer un élément de bouton qui déplace la carte pour la centrer 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. À vous de choisir quelle sera son utilité. La commande peut répondre à une saisie de l'utilisateur ou à des modifications de l'état de la 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 commandes personnalisés accessibles

Pour vous assurer que les commandes reçoivent les événements de 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 qu'un élément DIV comme conteneur de commandes natives ; ne réutilisez jamais un élément DIV en tant qu'élément d'interface utilisateur interactif.
• Si nécessaire, utilisez l'élément label, ou les attributs title ou aria-label pour fournir des informations sur un élément de l'interface utilisateur.

Positionner des commandes personnalisées

Vous pouvez positionner les commandes personnalisé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 un Node (généralement <div>) à la ControlPosition appropriée. Pour en savoir plus sur ces positions, consultez Positionnement des commandes ci-dessus.

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

L'API place les commandes à chaque position dans l'ordre d'une propriété index ; les commandes dont l'index est inférieur sont placées en premier. Par exemple, deux commandes personnalisées à la position BOTTOM_RIGHT seront disposées selon cet ordre, où les valeurs d'index inférieures priment. Par défaut, toutes les commandes personnalisées sont placées après le placement des commandes par défaut de l'API. Vous pouvez ignorer ce comportement en définissant la propriété index d'une commande sur une valeur négative. Les commandes personnalisées ne peuvent pas être placées à gauche du logo ou à 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 à la 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 (bien que pas particulièrement utile) et combine les modèles présentés ci-avant. Cette commande répond aux événements DOM 'click' en centrant la carte à un certain lieu par défaut :

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;
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

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;
index.js

Remarque : Le JavaScript est compilé à partir de l'extrait TypeScript.

Voir un exemple

Essayer avec un exemple

JSFiddle.net Google Cloud Shell

Ajouter l'état aux commandes

Les commandes peuvent également stocker un état. L'exemple suivant est semblable au précédent, mais la commande contient un bouton "Set Home" qui définit l'affichage d'un nouveau lieu d'accueil. Pour ce faire, nous définissons une propriété home_ dans la commande afin de stocker cet état et fournir des accesseurs et des mutateurs (getters et 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("button");

    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("button");

    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;
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

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("button");

    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("button");

    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;
index.js

Remarque : Le JavaScript est compilé à partir de l'extrait TypeScript.

Voir un exemple

Essayer avec un exemple

JSFiddle.net Google Cloud Shell