Labels en #GoogleMaps, ¿Cómo poner texto a los #markers? #APIV3

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.

¿Cómo ocultar o mostrar un grupo de #markers en el #API de #GoogleMaps? #ApiV3

En este artículo tratare de explicar de la manera más breve que puedo (y aun así salió mucho código), como podemos ocultar o mostrar un grupo de markers, y a su vez poder diferenciar unos de otros, para ello recurro a la utilización del javascript y la magia que nos permite crear objetos dinámicamente.

Para ver el script corriendo y en vivo dar clic aquí.

markers show hide

Para ello utilizo el API V3 de Google Maps para javascript.

Tenemos el siguiente código HTML el cual es sencillo, un grupo de checkbox que ejecutan una función de javascript, y un div el cual tiene de id “mapa”.

<div>
<p>Muestra u Oculta los markers (iconos) segun se desee.</p>
	<input checked="checked" onclick="jsMuestraOculta('Rojos')" type="checkbox" id="chkRojos" /><label for="chkRojos">Rojos</label>
    <input checked="checked" onclick="jsMuestraOculta('Azules')" type="checkbox" id="chkAzules"  /><label for="chkAzules">Azules</label>
</div>

<div style="height:500px;" id="mapa"></div>

A continuación muestro lo interesante, dos funciones de javascript, las cuales hacen todo el trabajo.


//en esta lista guardaremos los markers para poder tener acceso desde cualquier funcion de javascript
 var lstMarkers= [];

//variable global que guardara el objeto mapa de google, es global para tener acceso a ella en cualquier funcion
var map;

//inicializamos el mapa ejecutando la funcion de abajo que crea los markers
inicializaMapa();

function inicializaMapa() {

            //posicion del mapa
			var posicionCentro = new google.maps.LatLng(22.1111, -98.1111);
			//posiciones de los markers
			var posicionAzul1 = new google.maps.LatLng(22.1111, -98.1011);
			var posicionAzul2 = new google.maps.LatLng(22.1211, -98.1311);
			var posicionRojo1 = new google.maps.LatLng(22.1311, -98.1111);
			var posicionRojo2 = new google.maps.LatLng(22.1111, -98.1211);

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

		/* agregamos 2 iconos rojos y 2 iconos azules
		para ello crearemos 4 objetos de javascript que contendra el marker y aparte una bandera
		la cual dira que tipo es, si es tipo ROJO o tipo AZUL
		*/
		var TipoMarkerAzul1=new Object();
		var TipoMarkerAzul2=new Object();
		var TipoMarkerRojo1=new Object();
		var TipoMarkerRojo2=new Object();

		//procedemos a crear el marker y asignarselos a los objetos junto a su tipo
		TipoMarkerAzul1.tipo="Azul";
        TipoMarkerAzul1.marker = new google.maps.Marker({
            position: posicionAzul1,
            map: map,
			icon:"img/icons/markerAzul.png",
            title: 'Luminaria Principal'

        });

		TipoMarkerAzul2.tipo="Azul";
        TipoMarkerAzul2.marker = new google.maps.Marker({
            position: posicionAzul2,
            map: map,
			icon:"img/icons/markerAzul.png",
            title: 'Luminaria Principal'

        });

		TipoMarkerRojo1.tipo="Rojo";
        TipoMarkerRojo1.marker = new google.maps.Marker({
            position: posicionRojo1,
            map: map,
			icon:"img/icons/markerRojo.png",
            title: 'Luminaria Principal'

        });

		TipoMarkerRojo2.tipo="Rojo";
        TipoMarkerRojo2.marker = new google.maps.Marker({
            position: posicionRojo2,
            map: map,
			icon:"img/icons/markerRojo.png",
            title: 'Luminaria Principal'

        });

		//una vez creador los objetos junto con su marker y tipo los agregaremos a la lista global que creamos con anterioridad
		lstMarkers.push(TipoMarkerAzul1);
		lstMarkers.push(TipoMarkerAzul2);
		lstMarkers.push(TipoMarkerRojo1);
		lstMarkers.push(TipoMarkerRojo2);
		//el metodo push sirve para agregar un elemento a una lista o arreglo en javascript
    }

//función que realiza la operacion de evaluar los markers y si estos se ocultaran o mostraran dependiendo el checkbox presionado
function jsMuestraOculta(tipoIcono){

	    //esta variable sirve para saber si mostraremos u ocultaremos los markers
		var muestra=false;

		//evaluamos si el checkbox presionado fue el rojo
		if(tipoIcono=="Rojos"){

			//si el checkbox esta checado la variable muestra la ponemos como true
			if(document.getElementById("chkRojos").checked)
				muestra=true;

				//recorremos todos los markes de la lista
				for(i=0;i&amp;lt;lstMarkers.length;i++){
					//comparamos si el marker actual en el recorrido es ROJO
					if(lstMarkers[i].tipo=="Rojo")
					{
						/*
						  Si el checkbox del tipo fue checado, mostramos el marker, en caso contrario lo ocultamos
						  El metodo setMap, es un metodo del API de google el cual recibe el mapa al que pertenece el marker
						     si a este metodo le damos null, el marker no pertenecera a ningún mapa, por lo cual desaparecerá,
							 en cambio si le damos el objeto mapa, se agregara al mapa nuevamente por lo cual se mostrara
						*/
						if(muestra)
							lstMarkers[i].marker.setMap(map);
						else
							lstMarkers[i].marker.setMap(null);
					}
				}

		//si el presionado fue el Azul, realizamos lo mismo que en el if de arriba solo con los tipos markers Azules
		}else if(tipoIcono=="Azules"){

			if(document.getElementById("chkAzules").checked)
				muestra=true;

			for(i=0;i&amp;lt;lstMarkers.length;i++){

					if(lstMarkers[i].tipo=="Azul")
					{
						if(muestra)
							lstMarkers[i].marker.setMap(map);
						else
							lstMarkers[i].marker.setMap(null);
					}
			}
		}
}


La función inicializaMapa(), prácticamente como podemos observar se ejecuta al entrar al script; esta función prácticamente crea 4 markers y el mapa de google, los 4 markers se diferencian por que 2 tienen un icono azul y los otros un icono rojo.

Dentro de la función viene la explicación a detalle, pero brevemente explico; esta función lo que hace prácticamente es 4 objetos de javascript los cuales tienen dos atributos, un atributo que dice el tipo de marker que es, ya sea tipo Azul o tipo Rojo, y otro atributo que guarda el marker, un objeto que nos proporciona el API V3 de Google Maps. Estos objetos que llamo TipoMarker[Color][Numero] los asigno a una lista global llamada lstMarkers, para poder hacer un recorrido en otra función y evaluar.

La otra función que tiene de nombre jsMuestraOculta(), recibe una cadena la cual nos dice que checkbox fue presionado, ya sea el que muestra u oculta los iconos Azules, o el que muestra u oculta los iconos Rojos.

Brevemente explico lo que realiza (en el código de la función vienen comentarios que explican con más detalle). Esta función evalúa los elementos de la lista, y a su vez el checkbox si esta habilitado o des des-habilitado, dependiendo esto y el tipo de checkbox presionado (Azul o Rojo) proseguimos a mostrar u ocultar.

Espero les sirva este pequeño tutorial de cómo poder hacer algunas cosas interesantes con el API de Google Maps.

Para ver el script corriendo y en vivo dar clic aquí.