En este articulo hablare de cómo poner texto a los markers de google maps, para ello utilizaremos una librería (son escasas) la cual nos solucionara todo el problema, cabe mencionar que yo solo conozco a lo mucho 3 librerías que hacen esto, pero para mí esta es la mejor.
Para ver el código corriendo den clic aquí.
Para descargar la librería MarkerWithLabel den clic aquí.
Primero haremos la referencia al api de google maps y a la librería de la siguiente manera.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"</script> <script src="https://hdeleon.net/tutoriales/scripts/MarkerWithLabel.js"</script>
Estando ya la referencias proseguimos a el código.
Código CSS:
.labels {
color: #000;
background:#fff;
border:1px solid #000;
display:none;
text-align:left;
font.weight:bold;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 12px;
text-align: center;
width: 100px;
white-space: nowrap;
z-index:9999999;
position:relative
}
Código HTML:
<body> <div id="mapa" style="height:600px;"></div> </body>
Código Javascript:
inicializaMapa();
function inicializaMapa() {
//posicion del mapa
var posicionCentro = new google.maps.LatLng(22.1111, -98.1111);
//opciones de mapa
var mapOptions = {
zoom: 13,
center: posicionCentro,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//creamos el mapa en el div con el id "mapa"
map = new google.maps.Map(document.getElementById('mapa'),
mapOptions);
//aqui creamos el marker, solo que debe ser un tipo MarkerWithLabel, este objeto no lo proporcina la libreria de mismo nombre
markerConLabel= new MarkerWithLabel({
position:posicionCentro,
title: "marker con label",
labelContent: "Texto en mi marker",
labelAnchor: new google.maps.Point(50, 70),
labelClass: "labels", // the CSS class for the label
map: map
});
}
Como podemos observar tenemos un div en donde pondremos nuestro mapa, una clase de CSS y una función que es la que inicializa el mapa.
En la función hacemos lo de siempre creando el mapa con una posición dada, pero lo interesante viene al momento de crear el marker, esta vez no utilizaremos el típico marker, si no que utilizaremos un objeto llamado MarkerWithLabel el cual nos proporciona la librería del mismo nombre. La creación es igual que un marker común y corriente a excepción de los siguientes métodos:
labelContent: sirve para poner el texto que deseamos ver.
labelAnchor: sirve para poner la posición de nuestro label respecto a nuestro marker, es parecido al left y top de CSS (solo que el top funciona al revez, mayor numero se desplaza hacia arriba y no hacia abajo).
labelClass: Es para darle una clase de CSS a nuestro label, esta esta definida en el código que puse anteriormente.
Espero les sirva de ayuda para cuando deseen poner texto (label) en un marker, ya que no hay muchas opciones.
Les anexo el api de la libreria MarkerWithLabel.js que contiene algunas otras funcionalidades.
