Como usar um número em vez de uma letra no marcador personalizado do Google

Marcadores do Google Maps destacam sites específicos em um mapa. Por padrão, o Google identifica um marcador individual com um quadrado e vários marcadores com letras, mas isso pode não atender a alguns aplicativos. Por exemplo, se sua empresa se referir a ramificações como sites 1, 2 e 3, os marcadores numerados os identificariam mais claramente do que as letras. Use marcadores personalizados em seu programa para criar seus próprios rótulos para locais de mapa. Esses marcadores usam ícones personalizados, que você pode codificar usando a Google Charts API.

1

Abra o código-fonte do seu programa com um programa de desenvolvimento Java, como o Eclipse.

2

Role até a função "inicializar". Este bloco de código define seu mapa e define opções para ele. Por exemplo, o código pode ler:

function initialize () {

var coordinates = new google.maps.LatLng (42, 346429, -71, 097186);

var myOptions = {

zoom: 4,

centro: coordenadas,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var ourHeadquarters = novo google.maps.Map (document.getElementById ("map_canvas"), myOptions);

}

3

Adicione uma nova linha definindo a latitude e a longitude do seu marcador. Por exemplo, se o seu marcador precisar apontar uma latitude de 42, 349093 e uma longitude de -71, 101971, adicione a seguinte linha:

var markerCoordinates = new google.maps.LatLng (42.349093, -71.101971);

4

Adicione o seguinte bloco para criar seu marcador:

var marker = new google.maps.Marker ({

posição: markerCoordinates,

map: ourHeadquarters,

});

Substitua "markerCoordinates" pela variável que você criou na etapa anterior e substitua "ourHeadquarters" pela variável associada ao seu mapa.

5

Adicione a seguinte linha no bloco de marcadores para criar um ícone para o marcador:

ícone: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=A|FF0000|000000'

6

Substitua "A" na linha por um número. Por exemplo, substitua-o por "1", alterando a linha para:

ícone: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FF0000|999999'

7

Altere "FF0000" para o código HTML hexadecimal do plano de fundo do marcador. Por exemplo, para definir a cor do plano de fundo para amarelo, que usa o código "FFFF00", substitua o código por "FFFF00", alterando a linha para:

ícone: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|999999'

8

Altere "999999" para o código HTML hexadecimal do texto do número do marcador. Por exemplo, para escrever esse texto em preto, que usa o código "000000", substitua o código por "000000", alterando a linha para:

ícone: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|000000'