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í.
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&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&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í.
Hola,
Muy bueno el artículo.
Con tu código estoy intentando añadir ventanas de info a cada marker pero no lo consigo con este método.
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
¿Podrías ayudarme?
te anexo un ejemplo que hice para responderte:
https://hdeleon.net/como-abrir-una-ventana-con-informacion-dar-clic-en-nuestro-marker-googlemaps-infowindow/
Gracias por la rápida respuesta. He leido tu ejemplo y asi es como lo tenía.
Te paso la url y le echas un vistazo? El problema igual radica en como llamo al marker aquí:
«google.maps.event.addListener(marker, ‘click’, function() {infowindow.open(map,marker);»
Tu lo inicializas así:
» TipoMarkerAzul1.marker = new google.maps.Marker({..»
pero luego como lo invocas de nuevo? TipoMarkerAzul1.marker, TipoMarkerAzul1….
http://dognosti.com/mapa
Gracias
PD. Solo he puesto el marker azul de la izquierda.
Te anexo una liga a un ejemplo que te programe para que vieras como puedes hacerlo, el codigo es igual a el de este ejemplo a excepción de que anexe entre este bloque el codigo que abre los infoWindow:
/*
Codigo InfoWindow
*********************************************************/
https://hdeleon.net/tutoriales/maps/showHideMarkersGoogleMapsInfoWindow.html
Mil gracias y un saludo!!
hola , y como haces para poner «mi posicion» y ademas que al hacer click en las marcas se abra una ventana con la info de cada una en forma distinta .
gracias
a ver si te sirve esto:
https://hdeleon.net/como-abrir-una-ventana-con-informacion-dar-clic-en-nuestro-marker-googlemaps-infowindow/
en realidad me gusta el ejemplo de mostrar o no las azules o las rojas , te consulto como agregar otra marca con «mi posicion» o geolocalizacion y ademas que el infowindow muestre cada uno su info y no algo generico como «esta es la marca roja » o «esta es la marca azul»
Que lenguaje de programación estas utilizando? con el lenguaje del servidor ya sea php,asp,java, puedes generar el contenido dinamico de los markers y a estos asignarles la info como string como la otra url.
no soy programador , pense que tenias algun ejemplo o que podrias decirme como agragarlo a este
Dame unas horas y subo un post con la respuesta, saludos.
ok , muchas gracias !
Esta genial! era lo que estaba buscando, solo que nose si me puedas ayudar, como seria si los datos se hacen de manera dinamica, osea que esten en una base de datos MySQL, agradeceria tu respuesta
Esta genial! era lo que estaba buscando, solo que nose si me puedas ayudar, como seria si los datos se hacen de manera dinamica, osea que esten en una base de datos MySQL, agradeceria tu respuesta
que lenguaje de servidor estas utilizando?
Gracias por responder, estoy utilizando PHP con Wamp Server
Mira te adjunto mi código: HTML
Lugares cercanos
//<![CDATA[
var customIcons = {
Banco: {
icon: 'imagenes/bank.png'
},
Plazas: {
icon: 'imagenes/departmentstore.png'
},
Departamentos: {
icon: 'imagenes/apartment-3.png'
},
Restaurantes: {
icon: 'imagenes/restaurant.png'
},
Universidad: {
icon: 'imagenes/university.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(25.73117, -100.31189),
zoom: 14,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml3.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var nombre = markers[i].getAttribute("nombre");
var direccion = markers[i].getAttribute("direccion");
var tipo = markers[i].getAttribute("tipo");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latitud")),
parseFloat(markers[i].getAttribute("longitud")));
var html = "» + nombre + « » + direccion;
var icon = customIcons[tipo] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, ‘click’, function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject(‘Microsoft.XMLHTTP’) :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open(‘GET’, url, true);
request.send(null);
}
function doNothing() {}
//]]>
<div id="map"
——————————————————————————
PHP:
<?php
require("phpsqlajax_dbinfo.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('’,’>’,$xmlStr);
$xmlStr=str_replace(‘»‘,’"’,$xmlStr);
$xmlStr=str_replace(«‘»,’'’,$xmlStr);
$xmlStr=str_replace(«&»,’&’,$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysqli_connect ($db_host, $username, $password);
if (!$connection) {
die(‘Not connected : ‘ . mysqli_error($connection));
}
// Set the active MySQL database
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
die (‘Can’t use db : ‘ . mysqli_error($connection));
}
// Select all the rows in the markers table
$query = «SELECT * FROM markers WHERE 1»;
$result = mysqli_query($connection, $query);
if (!$result) {
die(‘Invalid query: ‘ . mysqli_error($connection));
}
header(«Content-type: text/xml; charset=utf-8_spanish_ci»);
// Start XML file, echo parent node
echo »;
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo »;
}
// End XML file
echo »;
?>
Espero puedas ayudarme porque no encuentro como hacerlo en ninguna parte, Gracias.
Mira te adjunto mi código: HTML
Lugares cercanos
//<![CDATA[
var customIcons = {
Banco: {
icon: 'imagenes/bank.png'
},
Plazas: {
icon: 'imagenes/departmentstore.png'
},
Departamentos: {
icon: 'imagenes/apartment-3.png'
},
Restaurantes: {
icon: 'imagenes/restaurant.png'
},
Universidad: {
icon: 'imagenes/university.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(25.73117, -100.31189),
zoom: 14,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml3.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var nombre = markers[i].getAttribute("nombre");
var direccion = markers[i].getAttribute("direccion");
var tipo = markers[i].getAttribute("tipo");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latitud")),
parseFloat(markers[i].getAttribute("longitud")));
var html = "» + nombre + « » + direccion;
var icon = customIcons[tipo] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, ‘click’, function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject(‘Microsoft.XMLHTTP’) :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open(‘GET’, url, true);
request.send(null);
}
function doNothing() {}
//]]>
<div id="map"
——————————————————————————
PHP:
<?php
require("phpsqlajax_dbinfo.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('’,’>’,$xmlStr);
$xmlStr=str_replace(‘»‘,’"’,$xmlStr);
$xmlStr=str_replace(«‘»,’'’,$xmlStr);
$xmlStr=str_replace(«&»,’&’,$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysqli_connect ($db_host, $username, $password);
if (!$connection) {
die(‘Not connected : ‘ . mysqli_error($connection));
}
// Set the active MySQL database
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
die (‘Can’t use db : ‘ . mysqli_error($connection));
}
// Select all the rows in the markers table
$query = «SELECT * FROM markers WHERE 1»;
$result = mysqli_query($connection, $query);
if (!$result) {
die(‘Invalid query: ‘ . mysqli_error($connection));
}
header(«Content-type: text/xml; charset=utf-8_spanish_ci»);
// Start XML file, echo parent node
echo »;
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo »;
}
// End XML file
echo »;
?>
Espero puedas ayudarme porque no encuentro como hacerlo en ninguna parte, Gracias.
skype: powerhdeleon
Lo que tienes que hacer es realizar la conexión a tu tabla donde tienes las ubicaciones, la unica diferencia es que los markers los deberas crear dinamicamente con codigo php, algo como lo siguiente:
//codigo de googlemaps bla bla bla bla
db->prepare(‘select latitud,longitud,tipo from misubicaciones’);
$statement->execute();
if($statement->rowCount()>0){
$rows=$statement->fetchAll(PDO::FETCH_OBJ);
for($i=0;$ilatitud.», «.$rows[$i]->longitud.»);
»
echo ‘TipoMarker.tipo=»»;
TipoMarker.marker = new google.maps.Marker({
position: posicionAzul1,
map: map,
icon:»img/icons/».$rows[$i]->tipo.».png»,
title: ‘algun texto’
});’;
echo «lstMarkers.push(TipoMarker);»;
}
}
?>
Es algo como eso, el problema es imprimir dinamicamente codigo javascript.
Lo que tienes que hacer es realizar la conexión a tu tabla donde tienes las ubicaciones, la unica diferencia es que los markers los deberas crear dinamicamente con codigo php, algo como lo siguiente:
//codigo de googlemaps bla bla bla bla
db->prepare(‘select latitud,longitud,tipo from misubicaciones’);
$statement->execute();
if($statement->rowCount()>0){
$rows=$statement->fetchAll(PDO::FETCH_OBJ);
for($i=0;$ilatitud.», «.$rows[$i]->longitud.»);
»
echo ‘TipoMarker.tipo=»»;
TipoMarker.marker = new google.maps.Marker({
position: posicionAzul1,
map: map,
icon:»img/icons/».$rows[$i]->tipo.».png»,
title: ‘algun texto’
});’;
echo «lstMarkers.push(TipoMarker);»;
}
}
?>
Es algo como eso, el problema es imprimir dinamicamente codigo javascript.
Gracias por responder, estoy utilizando PHP con Wamp Server
que lenguaje de servidor estas utilizando?