Indicatori (legacy)

Seleziona la piattaforma: Android iOS JavaScript

Introduzione

Un indicatore identifica una posizione su una mappa. Per impostazione predefinita, un indicatore utilizza un' immagine standard. Gli indicatori possono visualizzare immagini personalizzate, nel qual caso vengono in genere chiamati "icone." Indicatori e icone sono oggetti di tipo Marker. Puoi impostare un'icona personalizzata nel costruttore dell'indicatore o chiamando setIcon() sull'indicatore. Scopri di più su come personalizzare l'immagine dell'indicatore.

In generale, gli indicatori sono un tipo di overlay. Per informazioni su altri tipi di overlay, consulta Disegno sulla mappa.

Gli indicatori sono progettati per essere interattivi. Ad esempio, per impostazione predefinita ricevono eventi 'click', quindi puoi aggiungere un listener di eventi per visualizzare una finestra informativa che mostra informazioni personalizzate. Puoi consentire agli utenti di spostare un indicatore sulla mappa impostando la proprietà draggable dell'indicatore su true. Per ulteriori informazioni sugli indicatori trascinabili, vedi di seguito.

Aggiungi un indicatore

Il google.maps.Marker costruttore accetta un singolo Marker options oggetto letterale che specifica le proprietà iniziali dell'indicatore.

I seguenti campi sono particolarmente importanti e vengono impostati di frequente durante la costruzione di un indicatore:

  • position (obbligatorio) specifica un LatLng che identifica la posizione iniziale dell'indicatore. Un modo per recuperare un LatLng è utilizzare il servizio Geocoding.
  • map (facoltativo) specifica la Map su cui posizionare l'indicatore. Se non specifichi la mappa durante la costruzione dell' indicatore, l'indicatore viene creato ma non è collegato (o visualizzato) alla mappa. Puoi aggiungere l'indicatore in un secondo momento chiamando il metodo setMap() dell'indicatore.

L'esempio seguente aggiunge un indicatore semplice a una mappa di Uluru, al centro dell'Australia:

TypeScript

function initMap(): void {
  const myLatLng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatLng,
    }
  );

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

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

JavaScript

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

window.initMap = initMap;
Visualizza esempio

Nell'esempio precedente, l'indicatore viene posizionato sulla mappa durante la costruzione dell'indicatore utilizzando la proprietà map nelle opzioni dell'indicatore. In alternativa, puoi aggiungere l'indicatore direttamente alla mappa utilizzando il metodo setMap() dell'indicatore, come mostrato nell'esempio seguente: 

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

Il title dell'indicatore verrà visualizzato come descrizione comando.

Se non vuoi passare alcuna Marker options nel costruttore dell'indicatore, passa invece un oggetto vuoto {} nell'ultimo argomento del costruttore.

Visualizza esempio

Rimuovi un indicatore

Per rimuovere un indicatore dalla mappa, chiama il setMap() metodo passando null come argomento. 

marker.setMap(null);

Tieni presente che il metodo precedente non elimina l'indicatore. Rimuove l' indicatore dalla mappa. Se invece vuoi eliminare l'indicatore, devi rimuoverlo dalla mappa e poi impostare l'indicatore stesso su null.

Se vuoi gestire un insieme di indicatori, devi creare un array per contenerli gli indicatori. Utilizzando questo array, puoi chiamare setMap() su ogni indicatore nell'array a turno quando devi rimuovere gli indicatori. Puoi eliminare gli indicatori rimuovendoli dalla mappa e poi impostando la `length`length dell'array su `0`0, che rimuove tutti i riferimenti agli indicatori.

Visualizza esempio

Personalizza l'immagine di un indicatore

Puoi personalizzare l'aspetto visivo degli indicatori specificando un file immagine o un' icona basata su vettori da visualizzare al posto dell'icona a puntina predefinita di Google Maps. Puoi aggiungere testo con un etichetta dell'indicatore, utilizzare icone complesse per definire le regioni su cui è possibile fare clic, e impostare l'ordine di sovrapposizione degli indicatori.

Indicatori con icone immagine

Nel caso più semplice, un'icona può specificare un'immagine da utilizzare al posto dell' icona a puntina predefinita di Google Maps. Per specificare un'icona di questo tipo, imposta la proprietà icon dell'indicatore sull'URL di un'immagine. L'API Maps JavaScript ridimensionerà automaticamente l'icona.

TypeScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
    }
  );

  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

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

JavaScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
  });
  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

window.initMap = initMap;
Visualizza esempio

Indicatori con icone basate su vettori

Puoi utilizzare percorsi vettoriali SVG personalizzati per definire l'aspetto visivo degli indicatori. Per farlo, passa un oggetto letterale Symbol con il percorso desiderato alla proprietà icon dell'indicatore. Puoi definire un percorso personalizzato utilizzando la notazione del percorso SVG o utilizzare uno dei percorsi predefiniti in google.maps.SymbolPath. La proprietà anchor è obbligatoria per il corretto rendering dell'indicatore quando il livello di zoom cambia. Scopri di più sull' utilizzo dei simboli per creare icone basate su vettori per indicatori (e polilinee).

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
Visualizza esempio

Etichette degli indicatori

Un'etichetta dell'indicatore è una lettera o un numero che appare all'interno di un indicatore. L'immagine dell'indicatore in questa sezione mostra un'etichetta dell'indicatore con la lettera "B". Puoi specificare un'etichetta dell'indicatore come stringa o come MarkerLabel oggetto che include una stringa e altre proprietà dell'etichetta.

Quando crei un indicatore, puoi specificare una label proprietà in the MarkerOptions object. In alternativa, puoi chiamare setLabel() sull'oggetto Marker per impostare l'etichetta su un indicatore esistente.

L'esempio seguente mostra gli indicatori etichettati quando l'utente fa clic sulla mappa:

TypeScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap(): void {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: bangalore,
    }
  );

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location: google.maps.LatLngLiteral, map: google.maps.Map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

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

JavaScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap() {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: bangalore,
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });
  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

window.initMap = initMap;
Visualizza esempio

Icone complesse

Puoi specificare forme complesse per indicare le regioni su cui è possibile fare clic e specificare come devono apparire le icone rispetto ad altri overlay (il loro "ordine di sovrapposizione"). Le icone specificate in questo modo devono impostare le proprietà icon su un oggetto di tipo Icon.

Icon oggetti definiscono un'immagine. Definiscono anche il size dell'icona, l'origin dell'icona (se l'immagine che vuoi fa parte di un'immagine più grande in uno sprite, ad esempio) e l'anchor in cui deve trovarsi l'hotspot dell'icona (che si basa sull'origine).

Se utilizzi un'etichetta con un indicatore personalizzato, puoi posizionare l'etichetta con lalabelOrigin proprietà nell'Icon oggetto.

TypeScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: -33.9, lng: 151.2 },
    }
  );

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches: [string, number, number, number][] = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map: google.maps.Map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

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

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: -33.9, lng: 151.2 },
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

window.initMap = initMap;
Visualizza esempio

Conversione di oggetti MarkerImage in tipo Icon

Fino alla versione 3.10 dell'API Maps JavaScript, le icone complesse erano definite come MarkerImage oggetti. L'oggetto letterale Icon è stato aggiunto nella versione 3.10 e sostituisce MarkerImage dalla versione 3.11 in poi. Gli oggetti letterali Icon supportano gli stessi parametri di MarkerImage, consentendoti di convertire facilmente un MarkerImage in un Icon rimuovendo il costruttore, racchiudendo i parametri precedenti in {}'s e aggiungendo i nomi di ogni parametro. Ad esempio: 

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

diventa

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Ottimizza gli indicatori

L'ottimizzazione migliora il rendimento eseguendo il rendering di molti indicatori come un singolo elemento statico. Questa funzionalità è utile nei casi in cui è necessario un numero elevato di indicatori. Per impostazione predefinita, l'API Maps JavaScript decide se un indicatore verrà ottimizzato. Quando è presente un numero elevato di indicatori, l'API Maps JavaScript tenta di eseguire il rendering degli indicatori con l'ottimizzazione. Non tutti gli indicatori possono essere ottimizzati; in alcune situazioni, l'API Maps JavaScript potrebbe dover eseguire il rendering degli indicatori senza ottimizzazione. Disattiva il rendering ottimizzato per GIF animate GIF o PNG oppure quando ogni indicatore deve essere sottoposto a rendering come elemento DOM separato. L'esempio seguente mostra la creazione di un indicatore ottimizzato: 

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!",
    optimized: true 
});

Rendi accessibile un indicatore

Puoi rendere accessibile un indicatore aggiungendo un evento listener di clic e impostando optimized su false. Il listener di clic fa sì che l'indicatore abbia una semantica di pulsante, a cui è possibile accedere utilizzando la navigazione da tastiera, gli screen reader e così via. Utilizza l' title opzione per presentare testo accessibile per un indicatore.

Nell'esempio seguente, il primo indicatore riceve lo stato attivo quando viene premuto il tasto Tab; puoi quindi utilizzare i tasti freccia per spostarti tra gli indicatori. Premi di nuovo il tasto Tab per continuare a spostarti tra gli altri controlli della mappa. Se un indicatore ha una finestra informativa, puoi aprirla facendo clic sull'indicatore o premendo il tasto Invio o la barra spaziatrice quando l'indicatore è selezionato. Quando la finestra informativa si chiude, lo stato attivo torna all'indicatore associato.

TypeScript

// The following example creates five accessible and
// focusable markers.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: 34.84555, lng: -111.8035 },
    }
  );

  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops: [google.maps.LatLngLiteral, string][] = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];

  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

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

JavaScript

// The following example creates five accessible and
// focusable markers.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];
  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

window.initMap = initMap;
Visualizza esempio

Anima un indicatore

Puoi animare gli indicatori in modo che mostrino un movimento dinamico in una serie di circostanze diverse. Per specificare la modalità di animazione di un indicatore, utilizza la proprietà animation dell'indicatore, di tipo google.maps.Animation. Sono supportati i seguenti Animation valori:

  • DROP indica che l'indicatore deve scendere dalla parte superiore della mappa alla sua posizione finale quando viene posizionato per la prima volta sulla mappa. L'animazione cesserà quando l'indicatore si fermerà e animation tornerà a null. Questo tipo di animazione viene in genere specificato durante la creazione di Marker.
  • BOUNCE indica che l'indicatore deve rimbalzare sul posto. Un indicatore che rimbalza continuerà a rimbalzare finché la sua proprietà animation non viene impostata esplicitamente su null.

Puoi avviare un'animazione su un indicatore esistente chiamando setAnimation() sull'oggetto Marker.

TypeScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

let marker: google.maps.Marker;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 59.325, lng: 18.07 },
    }
  );

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

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

JavaScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 59.325, lng: 18.07 },
  });

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

window.initMap = initMap;
Visualizza esempio

Se hai molti indicatori, potresti non volerli rilasciare tutti contemporaneamente sulla mappa. Puoi utilizzare setTimeout() per spaziare le animazioni degli indicatori utilizzando un pattern simile a quello mostrato di seguito: 

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

Visualizza esempio

Rendi trascinabile un indicatore

Per consentire agli utenti di trascinare un indicatore in una posizione diversa sulla mappa, imposta draggable su true nelle opzioni dell'indicatore. 

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

Ulteriore personalizzazione degli indicatori

Per ulteriori estensioni della classe Marker, il clustering e la gestione degli indicatori e la personalizzazione degli overlay, consulta le librerie open source.