API do Google Map V3: como adicionar dados personalizados aos marcadores


116

Existe uma maneira de adicionar algumas informações personalizadas aos meus marcadores para uso posterior. Existem maneiras de ter uma janela de informações e um título, mas e se eu quiser associar o marcador a outras informações.

Tenho outras coisas sendo exibidas na página que dependem dos marcadores, então quando um marcador é clicado, o conteúdo da página tem que mudar dependendo de qual marcador foi clicado. Gostaria de armazenar e recuperar os dados personalizados assim que um marcador for, digamos clicado etc.

obrigado

Respostas:


213

Como o Google Marker é um objeto JavaScript, você pode adicionar informações personalizadas no formulário key: value, onde a chave é uma string válida. Elas são chamadas de propriedades do objeto e podem ser abordadas de muitas maneiras diferentes. O valor pode ser qualquer coisa legal, tão simples como números ou strings, e também funções ou mesmo outros objetos. Três maneiras simples: na declaração, notação de ponto e colchetes

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

Então, para recuperá-lo de maneira semelhante:

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});

3
Não há nada na documentação formalizando esse padrão. Esperamos que eles o façam, em vez de quebrá-lo em uma versão posterior.
Adam

1
A propriedade 'customInfo' não existe no tipo 'Marker'.
alehn96 de

1
Se você estiver usando o texto datilografado, convém usar os colchetes em vez do ponto para atribuir tais propriedades
Cocoduf

14

Você pode adicionar suas próprias propriedades personalizadas aos marcadores (apenas tome cuidado para não entrar em conflito com as propriedades da API).

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.