Esconder marcadores en Google maps V3 El mapa carga la ubicacion de los puntos de venta de los productos de mi cliente, por lo tanto necesito poder filtrar el mapa segun los distribuidores
este es el codigo del mapa:
Código:
<?php
include('funciones/consultas.php');
include('funciones/configuracion.php');
mysql_select_db($database, $volcan_conecta);?>
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var infoWindow = null;
function closeInfoWindow() {
infoWindow.close();
}
var customIcons = {
sucursales: {
icon: './imagenes/Pin.png',
}
};
//Abre la apertura del mapa y se puede configurar donde se quiere hacer la apertura
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
<?php coor_region($_GET['region']);?>
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow({
maxWidth: 500
});
// Change this depending on the name of your PHP file
downloadUrl("crea_xml.php", function(data) {
var xml = parseXml(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var idd = markers[i].getAttribute("idd");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var tcon = markers[i].getAttribute("tcon");
var ncon = markers[i].getAttribute("ncon");
var econ = markers[i].getAttribute("econ");
var foto = markers[i].getAttribute("foto");
var comu = markers[i].getAttribute("comu");
var region= '<?php Nombre_region($_GET['region']); ?> ';
// Comenzamos con el HTML
var html = [
'<div style="width:480px; height:280px;">',
'<div id="tabs">',
'<p id="dir_titulo">' + address + '<br />',
'<span>' + comu + ', ' + region + '</span><div class="linea"></div></p>',
'<ul>',
'<li><a href="#tabs-1"> General </a></li>',
'<li><a href="#tabs-2"> Familias </a></li>',
'<li><a href="#tabs-3"> Contacto </a></li>',
'</ul>',
'<div id="tabs-1">',
'<div class="imagen">',
'<img src="' + foto + '" width="100" height="100" id="imagen">',
'</div>',
'<h2>Sucursal "' + name + '"</h2>',
'<div style="clear:both"></div>',
'</div>',
'<div id="tabs-2">',
'<div class="imagen">',
'<img src="' + foto + '" width="100" height="100" id="imagen">',
'</div>',
'<div style="list-style:none; margin:5px; float:left;">',
'<h2>Familias Presentes</h2>',
'<ul>',
'<li>familia</li>',
'<li>familia</li>',
'<li>familia</li>',
'<li>familia</li>',
'<li>familia</li>',
'</ul>',
'</div>',
'<div style="clear:both"></div> ',
'</div>',
'<div id="tabs-3">',
'<div class="imagen">',
'<img src="' + foto + '" width="100" height="100">',
'</div>',
'<div style="list-style:none; margin:5px; float:left;">',
'<h2>Información de Contacto</h2>',
'<strong>Encargado:</strong> ' + ncon + ' <br />',
'<strong>Telefono :</strong> ' + tcon + ' <br />',
'<strong>Email:</strong><a href="mailto:' + econ+ '"> ' + econ + '</a> </div>',
'<div style="clear:both"></div>',
'</div>',
'</div>',
'</div>'
].join('');
var icon = customIcons[type] || {};
var marker = new google.maps.Marker(
{
map: map,
position: point,
icon: icon.icon,
title: address + ', ' + comu,
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
//apertura del INFOWINDOWS
// function bindInfoWindow(marker, map, infoWindow, html) {
// google.maps.event.addListener(marker, 'click', function() {
// infoWindow.setContent(html);
// infoWindow.open(map, marker);
// });
//
// }
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
$("#tabs").tabs();
});
infoWindow.open(map, marker);
infoWindow.setContent(html);
});
}
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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
//]]>
</script>
<style type="text/css">
html, body, #map {
margin:0;
padding:0;
height: 100%;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
}
h2 {color:#3d6589; font-size:16px;}
h3 {color:#3d6589; font-size:14px;}
p { padding:0;}
p#direccion { color:#3d6589;}
p#direccion span{color:#999;}
p#dir_titulo { color:#2448dc; font-size:14px; text-transform: uppercase; font-weight:bold;}
p#dir_titulo span{font-size:12px; color:#000;text-transform: uppercase;}
img {border-radius:8px;}
.imagen { padding:0; border:none; float:left; margin:5px 10px 20px 0px;}
.linea {margin:0px 0px 5px 0px; border-bottom:1px #CCC solid;}
</style>
</head>
<body onLoad="load()">
<div id="map"></div>
</body>
</html>
Y este la carga de los checkbox dinamicos ( segun la cantidad y nombre de los distribuidores)
Código:
la verdad que de java y ajax soy nulo, ya me costo adaptar mucho el mapa para que se adaptara a lo que necesito ( incluir pestañas con jQuery, marcadores dinamicos, etc).$sqlDD="SELECT strNombre,idDistribuidor FROM tbldistribuidor ORDER BY strNombre ASC";
$consultaDD=mysql_query($sqlDD, $volcan_conecta) or die(mysql_error());
//lista de distribuidores
while($row_DIS=mysql_fetch_assoc($consultaDD))
{
echo '<li><input type="checkbox" name="'.$row_DIS["idDistribuidor"].'" id="checkbox" />'.$row_DIS["strNombre"].'</li>';
}
Estuve leyendo y viendo algunos ejemplos:
[URL="http://www.maestrosdelweb.com/editorial/librerias-y-manejo-masivos-de-marcadores/"]http://www.maestrosdelweb.com/editorial/librerias-y-manejo-masivos-de-marcadores/[/URL]
[URL="http://www.wolfpil.de/v3/toggle-cats.html"]http://www.wolfpil.de/v3/toggle-cats.html[/URL]
Pero no logro adaptarlo a mi codigo.
Cualquier sugerencia o ejemplo es bienvenido
saludos
