Foros del Web » Programando para Internet » Javascript »

Esconder marcadores en Google maps V3

Estas en el tema de Esconder marcadores en Google maps V3 en el foro de Javascript en Foros del Web. Hola, estoy desarrollando una aplicacion entre PHP y Javascript con el API V3 de Google Maps, el tema es que necesito tener la posibilidad de ...
  #1 (permalink)  
Antiguo 19/02/2012, 13:41
 
Fecha de Ingreso: diciembre-2011
Ubicación: Chile
Mensajes: 36
Antigüedad: 6 años, 11 meses
Puntos: 2
Pregunta Esconder marcadores en Google maps V3

Hola, estoy desarrollando una aplicacion entre PHP y Javascript con el API V3 de Google Maps, el tema es que necesito tener la posibilidad de esconder ciertos marker en el mapa.

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:
$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>';
}
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).

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

Etiquetas: google, map, php+ajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:30.