Indicatori (legacy)

Seleziona la piattaforma: Android iOS JavaScript

Introduzione

Un indicatore identifica una località su una mappa. Per impostazione predefinita, un indicatore utilizza un nell'immagine standard. Gli indicatori possono mostrare immagini personalizzate, nel qual caso vengono generalmente definite "icone". Gli indicatori e le icone sono oggetti di tipo Marker Puoi impostare un'icona personalizzata all'interno del costruttore dell'indicatore oppure chiamata setIcon() sull'indicatore. Scopri di più su personalizzazione dell'immagine dell'indicatore.

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

Gli indicatori sono progettati per essere interattivi. Ad esempio, per impostazione predefinita riceveranno 'click' eventi, per consentirti di aggiungere un listener di eventi a richiama un finestra informativa visualizzare informazioni personalizzate. Puoi consentire agli utenti di spostare un indicatore mappa impostando la proprietà draggable dell'indicatore su true. Per ulteriori informazioni sugli indicatori trascinabili, consulta di seguito.

Aggiungi un marcatore

La google.maps.Marker prende un singolo oggetto Marker options che specifica le proprietà iniziali dell'indicatore.

I seguenti campi sono particolarmente importanti e vengono comunemente impostati quando per creare un indicatore:

  • position (obbligatorio) specifica un LatLng che identifica la posizione iniziale dell'indicatore. Uno. per recuperare un LatLng è utilizzare Servizio di geocodifica.
  • map (facoltativo) specifica il Map su cui posiziona l'indicatore. Se non specifichi la mappa relativa alla costruzione del indicatore, l'indicatore è stato creato ma non è attaccato a (o visualizzato su) la mappa. Puoi aggiungere l'indicatore in un secondo momento richiamando setMap().

Nell'esempio seguente viene aggiunto un indicatore semplice a una mappa di Uluru, nella 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;
index.ts

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

Prova Sample

Nell'esempio precedente, l'indicatore è posizionato sulla mappa in corrispondenza dei lavori in corso l'indicatore utilizzando la proprietà map nelle opzioni dell'indicatore. In alternativa, puoi aggiungere direttamente l'indicatore alla mappa utilizzando 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);

L'elemento title dell'indicatore verrà visualizzato come descrizione comando.

Se non vuoi trasmettere Marker options nel dell'indicatore, passa un oggetto vuoto {} nel l'ultimo argomento del costruttore.

Visualizza esempio

Rimuovere un indicatore

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

marker.setMap(null);

Il metodo descritto sopra non elimina l'indicatore. Rimuove il parametro indicatore dalla mappa. Se invece vuoi eliminare l'indicatore, devi rimuoverlo dalla mappa e poi impostare l'indicatore su null.

Se vuoi gestire un insieme di indicatori, devi creare un array che contenga gli indicatori. Utilizzando questo array, puoi quindi chiamare setMap() su ogni indicatore nella matrice quando devi rimuovere gli indicatori. Tu puoi eliminare gli indicatori rimuovendoli dalla mappa e impostando poi da length a 0 dell'array, in modo da rimuovere tutti riferimenti agli indicatori.

Visualizza esempio

Personalizzare l'immagine di un indicatore

Puoi personalizzare l'aspetto visivo degli indicatori specificando un file immagine o l'icona basata su vettori da visualizzare al posto di quella predefinita Icona a forma di puntina da disegno di Google Maps. Puoi aggiungere testo con un l'etichetta dell'indicatore e utilizzare icone complesse per definire le aree cliccabili e imposta l'ordine in pila degli indicatori.

Indicatori con icone di immagini

Nella maggior parte dei casi, per un'icona è possibile specificare un'immagine da utilizzare al posto del icona puntina da disegno predefinita di Google Maps. Per specificare un'icona di questo tipo, imposta proprietà icon dell'indicatore all'URL di un'immagine. L'API Maps JavaScript ridimensiona 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;
index.ts

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

Prova Sample

Indicatori con icone vettoriali

Puoi utilizzare percorsi vettoriali SVG personalizzati per definire l'aspetto visivo gli indicatori. A questo scopo, passa un valore letterale oggetto Symbol con percorso desiderato alla proprietà icon dell'indicatore. Puoi definire un percorso personalizzato notazione del percorso SVG oppure utilizza uno dei percorsi predefiniti google.maps.SymbolPath. La proprietà anchor è obbligatoria per far sì che l'indicatore vengono visualizzati correttamente quando cambia il livello di zoom. Scopri di più su usando i simboli per creare icone vettoriali per gli indicatori (e le 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;
index.ts

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

Prova Sample

Etichette dell'indicatore

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

Quando crei un indicatore, puoi specificare una proprietà label in il MarkerOptions . In alternativa, puoi chiamare setLabel() sul Indicatore per impostare l'etichetta su un indicatore esistente.

L'esempio seguente mostra indicatori etichettati quando l'utente fa clic sul 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;
index.ts

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

Prova Sample

Icone complesse

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

Icon definiscono un'immagine. Definiscono anche il size del , la origin dell'icona (se l'immagine che desideri fa parte di un'immagine più grande in uno sprite, ad esempio) e anchor in cui deve essere posizionato l'hotspot dell'icona (ovvero in base all'origine).

Se utilizzi un'etichetta con un oggetto l'indicatore, puoi posizionare l'etichetta con proprietà labelOrigin nel Icon .

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

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

Prova Sample

Conversione di MarkerImage oggetti nel tipo Icon in corso...

Fino alla versione 3.10 dell'API Maps JavaScript, icone complesse sono stati definiti come oggetti MarkerImage. La Il valore letterale oggetto Icon è stato aggiunto nella versione 3.10 e sostituisce MarkerImage dalla versione 3.11 in poi. I valori letterali oggetto Icon supportano gli stessi parametri dei MarkerImage, che ti consente di convertire facilmente un MarkerImage a un Icon rimuovendo il valore che racchiude i parametri precedenti tra quelli di {} 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)
};

Indicatori Ottimizza

L'ottimizzazione migliora il rendimento eseguendo il rendering di molti indicatori come uno solo statico. Ciò è utile nei casi in cui viene mostrato un numero elevato di indicatori obbligatorio. Per impostazione predefinita, l'API Maps JavaScript decide se un indicatore verrà ottimizzato. In presenza di un elevato numero gli indicatori, l'API Maps JavaScript tenterà di eseguire indicatori con l'ottimizzazione. Non tutti gli indicatori possono essere ottimizzati; in alcuni in situazioni simili, l'API Maps JavaScript potrebbe dover eseguire il rendering Indicatori senza ottimizzazione. Disattiva il rendering ottimizzato per le animazioni GIF o PNG oppure quando ogni indicatore deve essere visualizzato come un DOM separato . Il seguente esempio illustra 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. Impostazione di optimized su false. Listener di clic fa sì che l'indicatore presenti la semantica del pulsante, a cui è possibile accedere utilizzando navigazione da tastiera, screen reader e così via. Utilizza la Opzione title per presentare testo accessibile per un indicatore.

Nel seguente esempio, il primo indicatore viene attivato quando il tasto Tab è premuto; puoi utilizzare i tasti freccia per spostarti tra gli indicatori. Premi premi il tasto Tab di nuovo per continuare a spostarti tra gli altri controlli della mappa. Se ha una finestra informativa, puoi aprirla facendo clic sull'indicatore oppure premendo il tasto Invio o la barra spaziatrice quando l'indicatore è selezionato. Quando la finestra informativa si chiude, lo stato attivo tornerà 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;
index.ts

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

Prova Sample

Animazione di un indicatore

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

  • DROP indica che l'indicatore deve scendere dalla parte superiore di dalla mappa alla sua posizione finale. Animazione cesserà quando l'indicatore si fermerà e animation ripristina null. Questo tipo di animazione viene in genere specificato durante la creazione dell'Marker.
  • BOUNCE indica che l'indicatore deve rimbalzare in posizione. R l'indicatore di rimbalzo continuerà a rimbalzare fino a quando La proprietà animation è 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;
index.ts

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

Prova Sample

Se ci sono molti indicatori, è consigliabile non inserirli tutti sulla mappa contemporaneamente. Puoi utilizzare setTimeout() per distribuire i tuoi gli indicatori utilizzando uno schema 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 Da draggable a true nelle opzioni degli indicatori. 

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 dell'indicatore

Per un indicatore completamente personalizzato, vedi la sezione esempio di popup personalizzato.

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