Marcadores

Selecione a plataforma: Android iOS JavaScript

Introdução

Um marcador identifica uma localização no mapa. Os marcadores normalmente usam uma imagem padrão, mas podem mostrar imagens personalizadas. Nesse caso, eles são chamados de "ícones". Marcadores e ícones são objetos do tipo Marker. Defina um ícone personalizado no construtor do marcador ou chamando setIcon() no marcador. Saiba mais sobre como personalizar a imagem do marcador.

De modo geral, os marcadores são um tipo de sobreposição. Consulte Desenhar no mapa para conferir informações sobre outros tipos de sobreposição.

Os marcadores foram criados para serem interativos. Por exemplo, eles recebem eventos 'click' por padrão. Então, você pode adicionar um listener de eventos para abrir uma janela de informações que mostra dados personalizados. Para que os usuários consigam mover um marcador no mapa, defina a propriedade draggable dele como true. Confira abaixo mais informações sobre marcadores arrastáveis.

Adicionar um marcador

O construtor google.maps.Marker usa um único literal de objeto Marker options que especifica as propriedades iniciais do marcador.

Os campos a seguir são especialmente importantes e costumam ser definidos na construção de um marcador:

position (obrigatório) especifica um LatLng que identifica o local inicial do marcador. Uma maneira de recuperar um LatLng é usando o serviço de geocodificação.
map (opcional) especifica o Map para posicionar o marcador. Quando você não especifica o mapa na construção, o marcador é criado, mas não anexado (ou mostrado) no mapa. É possível adicionar o marcador posteriormente chamando o método setMap() dele.

O exemplo a seguir adiciona um marcador simples a um mapa em Uluru, no centro da Austrália:

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

Exemplo

Testar amostra

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

No exemplo acima, o marcador é posicionado no mapa durante a construção, usando a propriedade map nas opções. Também é possível adicionar o marcador ao mapa diretamente usando o método setMap(), como mostrado no exemplo abaixo:

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

O title do marcador aparece como uma dica.

Se você não quiser transmitir Marker options no construtor do marcador, use um objeto vazio {} no último argumento.

Exemplo

Remover um marcador

Para remover um marcador do mapa, chame o método setMap() e transmita null como argumento.

marker.setMap(null);

O método acima não exclui o marcador, apenas o remove do mapa. Se a sua intenção é a exclusão, remova o marcador do mapa e defina o próprio marcador como null.

Para gerenciar um grupo de marcadores, crie uma matriz com todos eles e chame setMap() em cada um quando precisar remover os marcadores. Para excluir, remova os marcadores do mapa e defina o length da matriz como 0, eliminando todas as referências a eles.

Exemplo

Personalizar a imagem de um marcador

Para personalizar a aparência dos marcadores, mostre um arquivo de imagem ou um ícone vetorial em vez do ícone de alfinete padrão do Google Maps. Adicione texto com um rótulo de marcador e use ícones complexos para definir regiões clicáveis e a ordem de pilha dos marcadores.

Marcadores com ícones de imagem

No caso mais básico, é possível especificar uma imagem a ser usada em vez do ícone de alfinete padrão do Google Maps. Para isso, defina a propriedade icon do marcador como o URL de uma imagem. A API Maps JavaScript vai dimensionar o ícone automaticamente.

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

Exemplo

Testar amostra

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Marcadores com ícones vetoriais

Use os caminhos de vetor SVG personalizados para definir a aparência dos marcadores, transmitindo um literal de objeto Symbol com o trajeto desejado para a propriedade icon. Defina um caminho personalizado usando a notação de caminho SVG ou aproveite um dos caminhos predefinidos em google.maps.SymbolPath. A propriedade anchor é obrigatória para a renderização correta do marcador quando o zoom é ajustado. Saiba mais sobre como usar símbolos para criar ícones vetoriais em marcadores (e polilinhas).

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

Exemplo

Testar amostra

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Rótulos de marcador

Um rótulo de marcador é um número ou uma letra que aparece dentro dele. A imagem do marcador nesta seção mostra um rótulo com a letra "B". Especifique um rótulo de marcador como uma string ou um objeto MarkerLabel que inclui uma string e outras propriedades de rótulo.

Ao criar um marcador, defina uma propriedade label no objeto MarkerOptions. Também é possível chamar setLabel() no objeto Marker para definir o rótulo de um marcador atual.

O exemplo a seguir mostra marcadores rotulados quando o usuário clica no 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

Exemplo

Testar amostra

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Ícones complexos

Especifique formas complexas para indicar regiões clicáveis e definir como os ícones devem aparecer em relação a outras sobreposições (a "ordem de pilha"). Os ícones especificados dessa forma devem configurar as propriedades icon como um objeto do tipo Icon.

Os objetos Icon definem uma imagem, os parâmetros size e origin do ícone (se a imagem desejada fizer parte de uma imagem maior em um sprite, por exemplo), além do anchor em que o ponto de acesso do ícone deve estar localizado (de acordo com a origem).

Posicione o rótulo com um marcador personalizado (se estiver usando um) junto da propriedade labelOrigin no objeto 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

Exemplo

Testar amostra

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Converter objetos `MarkerImage` para o tipo `Icon`

Até a versão 3.10 da API Maps JavaScript, os ícones complexos eram definidos como objetos MarkerImage. O literal de objeto Icon foi incluído na versão 3.10 e substitui MarkerImage da versão 3.11 em diante. Os literais de objeto Icon são compatíveis com os mesmos parâmetros que MarkerImage. Isso possibilita converter um objeto MarkerImage em Icon com facilidade ao remover o construtor, unir os parâmetros anteriores em {} e adicionar os nomes de cada parâmetro. Por exemplo:

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

se torna

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

Otimizar marcadores

A otimização melhora a performance ao renderizar vários marcadores como um único elemento estático. Isso é útil quando o uso de um grande número de marcadores é obrigatório. Por padrão, a API Maps JavaScript define se um marcador vai ser otimizado. Quando há um grande número de marcadores, a API Maps JavaScript tenta otimizar a renderização deles, mas às vezes isso não é possível. Desative a renderização otimizada para PNGs ou GIFs animados ou quando cada marcador precisar ser renderizado como um elemento DOM diferente. O exemplo a seguir mostra como criar um marcador otimizado:

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

Tornar um marcador acessível

Para tornar um marcador acessível, adicione um evento de listener de clique e defina optimized como false. O listener de clique faz com que o marcador tenha semântica de botão, que pode ser acessado com a navegação pelo teclado, leitores de tela, entre outros. Use a opção title para apresentar um texto acessível ao marcador.

No exemplo a seguir, o foco vai para o primeiro marcador quando a tecla "Tab" é pressionada. Use as teclas de seta para navegar entre os marcadores. Pressione "Tab" novamente para passar a outros controles do mapa. Se o marcador tiver uma janela de informações, clique nele ou pressione a tecla "Enter" ou a barra de espaços quando ele estiver selecionado para abrir. O foco retorna ao marcador associado quando a janela de informações é fechada.

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

Exemplo

Testar amostra

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Animar um marcador

Crie animações em marcadores para que eles tenham movimento dinâmico em diversas circunstâncias. Se quiser especificar a forma de animação de um marcador, use a propriedade animation do tipo google.maps.Animation. Este valores Animation são compatíveis:

DROP indica que o marcador deve cair da parte de cima do mapa até sua posição final na primeira vez em que é posicionado no mapa. A animação termina quando o marcador para de se mover, e animation volta a ser null. Geralmente, esse tipo de animação é especificado durante a criação do Marker.
BOUNCE indica que o marcador deve saltar no lugar. Ele continua em movimento até que a propriedade animation seja explicitamente definida como null.

Para iniciar uma animação em um marcador, chame setAnimation() no objeto 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

Exemplo

Testar amostra

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Quando há vários marcadores, não convém colocar todos de uma vez no mapa. Use setTimeout() para espaçar as animações dos marcadores com base em um padrão, conforme o mostrado abaixo:

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

Exemplo

Tornar um marcador arrastável

Quando você define draggable como true nas opções do marcador, os usuários podem arrastar esse elemento para um local diferente no mapa.

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

Outras personalizações de marcadores

Consulte o exemplo de pop-up personalizado para conferir um marcador totalmente personalizado.

Consulte bibliotecas de código aberto para informações sobre outras extensões da classe de marcadores, clustering e gerenciamento de marcadores e personalização de sobreposição.

Marcadores

Introdução

Adicionar um marcador

TypeScript

JavaScript

Testar amostra

Remover um marcador

Personalizar a imagem de um marcador

Marcadores com ícones de imagem

TypeScript

JavaScript

Testar amostra

Marcadores com ícones vetoriais

TypeScript

JavaScript

Testar amostra

Rótulos de marcador

TypeScript

JavaScript

Testar amostra

Ícones complexos

TypeScript

JavaScript

Testar amostra

Converter objetos MarkerImage para o tipo Icon

Otimizar marcadores

Tornar um marcador acessível

TypeScript

JavaScript

Testar amostra

Animar um marcador

TypeScript

JavaScript

Testar amostra

Tornar um marcador arrastável

Outras personalizações de marcadores

Converter objetos `MarkerImage` para o tipo `Icon`