Cómo usar un número en lugar de una letra en el marcador personalizado de Google

Los marcadores de Google Maps resaltan sitios específicos en un mapa. De forma predeterminada, Google identifica un marcador individual con un cuadrado y varios marcadores con letras, pero es posible que esto no sea adecuado para algunas aplicaciones. Por ejemplo, si su empresa se refiere a las sucursales como sitios 1, 2 y 3, los marcadores numerados los identificarán más claramente que las letras. Use marcadores personalizados en su programa para diseñar sus propias etiquetas para las ubicaciones de los mapas. Estos marcadores utilizan iconos personalizados, que puede codificar utilizando la API de Google Charts.

1.

Abra el código fuente de su programa con un programa de desarrollo Java como Eclipse.

2.

Desplácese hasta la función "inicializar". Este bloque de código define su mapa y define sus opciones. Por ejemplo, el código puede leer:

función inicializar () {

coordenadas var = nuevo google.maps.LatLng (42.346429, -71.097186);

var myOptions = {

zoom: 4,

centro: coordenadas,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

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

}

3.

Agrega una nueva línea que define la latitud y longitud de tu marcador. Por ejemplo, si su marcador debe señalar una latitud de 42.349093 y una longitud de -71.101971, agregue la siguiente línea:

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

4.

Agrega el siguiente bloque para crear tu marcador:

marcador var = nuevo google.maps.Marker ({

posición: marcador Coordinadoras,

mapa: nuestra sede,

});

Reemplace "markerCoordinates" con la variable que creó en el paso anterior, y reemplace "ourHeadquarters" con la variable asociada a su mapa.

5.

Agregue la siguiente línea dentro del bloque de marcador para crear un icono para el marcador:

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

6.

Reemplace "A" en la línea con un número. Por ejemplo, sustitúyalo por "1", cambiando la línea a:

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

7.

Cambie "FF0000" al código hexadecimal HTML del fondo del marcador. Por ejemplo, para establecer el color de fondo en amarillo, que usa el código "FFFF00", reemplace el código con "FFFF00", cambiando la línea a:

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

8.

Cambie "999999" al código hexadecimal HTML del texto del número del marcador. Por ejemplo, para escribir este texto en negro, que usa el código "000000", reemplace el código con "000000", cambiando la línea a:

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