Znaczniki (starsza wersja)

Wybierz platformę: Android iOS JavaScript

Wprowadzenie

Znacznik wskazuje lokalizację na mapie. Domyślnie znacznik używa funkcji standardowy obraz. Znaczniki mogą wyświetlać niestandardowe obrazy, w tym przypadku nazywanych „ikonami”. Znaczniki i ikony są obiektami typu Marker Możesz ustawić ikonę niestandardową w konstruktorze znacznika lub przez Wywołuję setIcon() na znaczniku. Więcej informacji: dostosowania obrazu znacznika.

Ogólnie rzecz biorąc, znaczniki to rodzaj nakładki. Informacje na temat innych typów nakładek, patrz Rysunek na mapie.

Znaczniki zostały zaprojektowane tak, aby były interaktywne. Na przykład domyślnie odbieraj zdarzenia 'click', więc możesz dodać detektor zdarzeń do wyświetlić okno informacyjne wyświetlania niestandardowych informacji. Możesz zezwolić użytkownikom na przenoszenie znacznika na mapy, ustawiając właściwość draggable znacznika na true Więcej informacji o znacznikach możliwych do przeciągania znajdziesz w sekcji poniżej.

Dodaj znacznik

google.maps.Marker konstruktor przyjmuje pojedynczy obiekt Marker options literał określający początkowe właściwości znacznika.

Podane niżej pola są szczególnie ważne i często ustawiane, gdy: utworzenie znacznika:

  • position (wymagany) określa LatLng identyfikujący początkową lokalizację znacznika. Jeden sposobem na pobranie LatLng jest użycie Usługa geokodowania.
  • map (opcjonalnie) określa pole Map, na którym ma zostać umieść znacznik. Jeśli nie wskażesz mapy przy budowie znacznik zostanie utworzony, ale nie będzie połączony (ani nie jest wyświetlany) mapę. Znacznik możesz dodać później, wywołując jego funkcję Metoda setMap().

Poniższy przykład dodaje prosty znacznik do mapy w Uluru, w centrum Australii:

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
Zobacz przykład

Zobacz próbkę

W powyższym przykładzie znacznik jest umieszczony na mapie przy budowaniu za pomocą właściwości map w opcjach znacznika. Możesz też dodać znacznik bezpośrednio do mapy, używając setMap() znacznika, jak w przykładzie poniżej: 

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);

Pole title znacznika pojawi się jako etykietka.

Jeśli nie chcesz przekazywać Marker options w konstruktora znacznika, zamiast tego przekaż pusty obiekt {} w funkcji ostatniego argumentu konstruktora.

Zobacz przykład

Usuwanie znacznika

Aby usunąć znacznik z mapy, wywołaj metodę setMap() podając wartość null jako argument. 

marker.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia znacznika. Usuwa znacznik na mapie. Jeżeli natomiast chcesz usunąć znacznik, usunąć ją z mapy, a następnie ustawić znacznik na null

Jeśli chcesz zarządzać zestawem znaczników, utwórz tablicę do przechowywania znaczniki. Za pomocą tej tablicy możesz następnie wywołać funkcję setMap() na każdy znacznik w tablicy, gdy trzeba usunąć te znaczniki. Ty mogą usunąć znaczniki, usuwając je z mapy, a następnie ustawiając z tablicy length do 0, co powoduje usunięcie wszystkich lub odwołania do znaczników.

Zobacz przykład

Dostosowywanie obrazu znacznika

Możesz dostosować wygląd znaczników, określając image file lub ikona wektorowa do wyświetlenia zamiast domyślnej Ikona pinezki Map Google. Możesz dodać tekst za pomocą marker label i użyj złożone ikony definiujące klikalne obszary, i ustaw kolejność znaczników.

Znaczniki z ikonami obrazów

W najbardziej podstawowym przypadku ikona może określać obraz, który ma zostać użyty zamiast domyślna ikona pinezki Map Google. Aby wskazać taką ikonę, ustaw parametr icon znacznika do adresu URL obrazu. Interfejs Maps JavaScript API automatycznie dostosuje rozmiar ikony.

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
Zobacz przykład

Zobacz próbkę

Znaczniki z ikonami wektorowymi

Za pomocą niestandardowych ścieżek wektorowych SVG można określić wygląd za pomocą znaczników. W tym celu przekaż literał obiektu Symbol z funkcją żądaną ścieżkę do właściwości icon znacznika. Możesz zdefiniować ścieżki niestandardowej za pomocą notacji ścieżki SVG lub skorzystaj z jednej ze wstępnie zdefiniowanych ścieżek w google.maps.SymbolPath. Właściwość anchor jest wymagana, by znacznik mógł w przypadku zmiany poziomu powiększenia. Więcej informacji o przy użyciu symboli i ikon wektorowych dla znaczników (i linii łamanych).

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
Zobacz przykład

Zobacz próbkę

Etykiety znaczników

Etykieta znacznika to litera lub cyfra wyświetlana wewnątrz znacznika. obraz znacznika w tej sekcji wyświetla etykietę znacznika z literą „B” . Możesz określić etykietę znacznika jako ciągu MarkerLabel , który zawiera ciąg znaków i inne właściwości etykiet.

Podczas tworzenia znacznika możesz określić właściwość label w: MarkerOptions. obiektu. Możesz też zadzwonić do firmy setLabel() pod numer Znacznik , aby ustawić etykietę istniejącego znacznika.

W poniższym przykładzie znaczniki etykiet są wyświetlane, gdy użytkownik kliknie ikonę mapa:

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
Zobacz przykład

Zobacz próbkę

Złożone ikony

Możesz określić złożone kształty, aby wskazać regiony, które można kliknąć. określać sposób wyświetlania ikon względem innych nakładek (ich „kolejność grupowa”). Ikony określone w ten sposób powinny icon właściwości obiektu typu Icon

Icon definiują obraz. Definiują również size ikona, ikona origin (jeśli wybrany obraz jest częścią (np. większego obrazu w spritecie), a elementy anchor, gdzie powinien znajdować się hotspot ikony (czyli w zależności od miejsca pochodzenia).

Jeśli używasz etykiety z własną etykietą możesz umieścić etykietę przy użyciu właściwość labelOrigin w Icon obiektu.

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
Zobacz przykład

Zobacz próbkę

Konwertuję obiekty (MarkerImage) na typ Icon

Do wersji 3.10 Maps JavaScript API złożone ikony zostały zdefiniowane jako MarkerImage obiekty. Dodano literał obiektu Icon w wersji 3.10 i zastępuje MarkerImage od wersji 3.11. Literały obiektów Icon obsługują te same parametry co MarkerImage, która umożliwia łatwą konwersję MarkerImage na Icon, usuwając konstruktora, umieszczając poprzednie parametry w parametrach {} oraz dodając nazwy poszczególnych parametrów. Na przykład: 

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));

zmienia się w

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)
};

Optymalizuj znaczniki

Optymalizacja zwiększa wydajność przez renderowanie wielu znaczników jako jednego statycznego. Jest to przydatne w przypadku, gdy Domyślnie interfejs Maps JavaScript API określi, czy znacznik będzie zoptymalizowany. Gdy występuje duża liczba za pomocą tagów, interfejs Maps JavaScript API spróbuje wyświetlić z optymalizacją. Nie wszystkie znaczniki można zoptymalizować. w niektórych w pewnych sytuacjach interfejs Maps JavaScript API może wymagać renderowania Znaczniki bez optymalizacji. Wyłącz zoptymalizowane renderowanie reklam animowanych GIF lub PNG albo gdy każdy znacznik musi być renderowany jako osobny element DOM. . Poniższy przykład pokazuje tworzenie znacznika zoptymalizowanego: 

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

Ustawianie znacznika jako dostępnego

Aby znacznik był dostępny, dodaj zdarzenie detektora kliknięć. ustawiam wartość false w polu optimized. Detektor kliknięć sprawia, że znacznik ma semantykę przycisku, do której można uzyskać dostęp nawigację za pomocą klawiatury, czytniki ekranu itd. Użyj Opcja title wyświetlająca dostępny tekst do znacznika.

W poniższym przykładzie pierwszy znacznik zostanie zaznaczony, gdy klawisz Tab jest naciśnięto; możesz używać klawiszy strzałek do poruszania się między znacznikami. Naciśnij aby kontynuować poruszanie się po pozostałych elementach sterujących mapy. Jeśli ma okno informacyjne, możesz je otworzyć, klikając znacznik lub naciskając klawisz Enter lub spację po zaznaczeniu znacznika. Gdy okno informacyjne zostanie zamknięte, zaznaczenie powróci do powiązanego znacznika.

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
Zobacz przykład

Zobacz próbkę

Animuj znacznik

Można animować znaczniki tak, aby prezentowały dynamiczny ruch w różnych w różnych okolicznościach. Aby określić sposób animacji znacznika, użyj funkcji właściwość animation znacznika, typu google.maps.Animation Poniżej Obsługiwane wartości Animation:

  • DROP oznacza, że znacznik powinien upuścić się z góry do ostatecznego położenia mapy po jej umieszczeniu na mapie. Animacja przestanie, gdy znacznik będzie w miejscu spoczynku, a animation Przywróć: null. Ten typ animacji jest zwykle określony podczas tworzenia Marker.
  • BOUNCE oznacza, że znacznik powinien się odbić na swoim miejscu. O znacznik odsyłania będzie odsyłał do momentu Właściwość animation jest ustawiona bezpośrednio na null.

Można zainicjować animację na istniejącym znaczniku, wywołując setAnimation() na obiekcie 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
Zobacz przykład

Zobacz próbkę

Jeśli mają Państwo wiele znaczników, można nie chcieć umieszczać ich na mapie za jednym razem. Możesz użyć funkcji setTimeout() do przechowywania markery na podstawie poniższego wzoru: 

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

Zobacz przykład

Ustawianie znacznika z możliwością przeciągania

Aby umożliwić użytkownikom przeciąganie znacznika do innej lokalizacji na mapie, ustaw draggable do true w opcjach znaczników. 

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!"
});

Dalsze dostosowywanie znaczników

Aby uzyskać w pełni dostosowaną znacznik, zobacz przykład niestandardowego wyskakującego okienka.

Więcej informacji o klasie znaczników, grupowaniu znaczników i zarządzaniu nimi oraz dostosowywaniu nakładki znajdziesz w artykule biblioteki open source.