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 mostrare immagini personalizzate, nel qual caso vengono solitamente definiti "icone". Gli indicatori e le icone sono oggetti di tipo Marker. Puoi impostare un'icona personalizzata all'interno del costruttore dell'indicatore o chiamando setIcon() sull'indicatore. Scopri di più sulla 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, ricevono eventi 'click', quindi puoi aggiungere un ascoltatore 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 spostabili, consulta di seguito.

Aggiungi un marcatore

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

I seguenti campi sono particolarmente importanti e vengono impostati di solito durante la creazione di un indicatore:

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

L'esempio seguente aggiunge un semplice indicatore a una mappa di Uluru, nel 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 viene posizionato sulla mappa al momento della sua creazione 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 alcun Marker options nel costruttore dell'indicatore, passa un oggetto vuoto {} nell' 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);

Tieni presente che il metodo riportato sopra non elimina l'indicatore. Il segnaposto viene rimosso dalla mappa. Se invece vuoi eliminare l'indicatore, devi rimuoverlo dalla mappa e impostare l'indicatore stesso su null.

Se vuoi gestire un insieme di indicatori, devi creare un array per contenerli. Utilizzando questo array, puoi chiamare setMap() su ogni indicatore nell'array quando devi rimuoverli. Puoi eliminare gli indicatori rimuovendoli dalla mappa e impostando length dell'array su 0, in modo da rimuovere tutti i riferimenti agli indicatori.

Visualizza esempio

Personalizzare un'immagine di indicatore

Puoi personalizzare l'aspetto visivo degli indicatori specificando un file immagine o un'icona basata su vettori da visualizzare anziché l'icona disegnato con un segnaposto di Google Maps predefinita. Puoi aggiungere del testo con un'etichetta dell'indicatore e utilizzare icone complesse per definire regioni cliccabili e impostare l'ordine di visualizzazione degli indicatori.

Indicatori con icone di immagini

Nel caso più semplice, un'icona può specificare un'immagine da utilizzare al posto dell'icona della freccia di Google Maps predefinita. Per specificare un'icona di questo tipo, imposta la proprietà icon del segnaposto 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;
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 basate su vettori

Puoi utilizzare percorsi vettoriali SVG personalizzati per definire l'aspetto visivo dei marcatori. A tal fine, passa un valore letterale dell'oggetto Symbol con il percorso preferito alla proprietà icon dell'indicatore. Puoi definire un percorso personalizzato utilizzando la notazione del percorso SVG oppure uno dei percorsi predefiniti in google.maps.SymbolPath. La proprietà anchor è obbligatoria per il corretto rendering dell'indicatore quando cambia il livello di zoom. Scopri di più su come utilizzare i simboli per creare icone basate su vettori 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 degli indicatori

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

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

Il seguente esempio mostra 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;
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 regioni cliccabili e la modalità di visualizzazione delle icone rispetto ad altri overlay ("ordine di impilaggio"). Le icone specificate in questo modo devono impostare le proprie proprietà icon su un oggetto di tipo Icon.

Gli oggetti Icon definiscono un'immagine. Inoltre, definiscono il size dell'icona, il origin dell'icona (ad esempio, se l'immagine che vuoi è parte di un'immagine più grande in uno sprite) e il anchor in cui deve trovarsi l'hotspot dell'icona (in base all'origine).

Se utilizzi un'etichetta con un indicatore personalizzato, puoi posizionarla con la proprietà labelOrigin nell'oggetto 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 oggetti MarkerImage in tipo Icon

Fino alla versione 3.10 dell'API Maps JavaScript, le icone complesse erano definite come oggetti MarkerImage. Il valore letterale dell'oggetto Icon è stato aggiunto nella versione 3.10 e sostituisce MarkerImage a partire dalla versione 3.11. I valori letterali di oggetti Icon supportano gli stessi parametri di MarkerImage, consentendoti di convertire facilmente un MarkerImage in un Icon rimuovendo il costruttore, inserendo i parametri precedenti in {} e aggiungendo i nomi di ciascun 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 le prestazioni perché esegue il rendering di molti indicatori come un singolo elemento statico. È utile nei casi in cui sia richiesto un numero elevato di indicatori. Per impostazione predefinita, l'API Maps JavaScript decide se ottimizzare un indicatore. Quando è presente un numero elevato di indicatori, l'API Maps JavaScript tenterà di visualizzarli con ottimizzazione. Non tutti gli indicatori possono essere ottimizzati. In alcuni casi, l'API Maps JavaScript potrebbe dover eseguire il rendering degli indicatori senza ottimizzazione. Disattiva il rendering ottimizzato per GIF o PNG animati o quando ogni indicatore deve essere visualizzato come elemento DOM distinto. L'esempio seguente mostra la creazione di un indicatore ottimizzato: 

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

Rendere accessibile un indicatore

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

Nel seguente esempio, 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 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;
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

Animare un indicatore

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

  • DROP indica che l'indicatore deve cadere dalla parte superiore della mappa alla sua posizione finale quando viene posizionato per la prima volta sulla mappa. L'animazione verrà interrotta quando l'indicatore si fermerà e animation tornerà a null. Questo tipo di animazione viene in genere specificato durante la creazione del Marker.
  • BOUNCE indica che l'indicatore deve oscillare sul posto. Un indicatore con balzo continuerà a oscillare 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;
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 hai molti indicatori, ti consigliamo di non inserirli tutti contemporaneamente sulla mappa. Puoi utilizzare setTimeout() per spaziare le animazioni dei segnaposto utilizzando un pattern come quello mostrato di seguito: 

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

Visualizza esempio

Rendere un indicatore trascinabile

Per consentire agli utenti di trascinare un indicatore in un'altra posizione 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 un indicatore completamente personalizzato, consulta l'esempio di popup personalizzato.

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