Foros del Web » Programando para Internet » Javascript » Frameworks JS »

filtrar custom markers google maps con jquery

 Estas en el tema de filtrar custom markers google maps con jquery en el foro de Frameworks JS en Foros del Web. hola a todos estoy dando mis primeros pasos en el mundo de google map y todo iba bien hasta que me tope con un pequeño ...
  #1 (permalink)  
Antiguo 28/05/2013, 04:07
 
Fecha de Ingreso: mayo-2013
Mensajes: 1
Antigüedad: 10 años, 11 meses
Puntos: 0
filtrar custom markers google maps con jquery
hola a todos estoy dando mis primeros pasos en el mundo de google map y todo iba bien hasta que me tope con un pequeño problema. estoy intentado filtrar unos marcadores personalizados que cuando den check se oculte según el tipo coloco mi código para que me den una ayudita ya que estoy intentando y no se pero no me oculta los marcadores.

coloco mi código este es mi jquey

Código Javascript: 
Ver original
  1. jQuery(function ($) {
  2.     // Controle du touch pour ipad
  3.     var ua = navigator.userAgent,
  4.     eventClick = (ua.match(/iPad/i)) ? "touchstart" : "click";
  5.     eventMouseOver = (ua.match(/iPad/i)) ? "touchstart" : "mouseover";
  6.     // Variable definition for MouseOver Statement, change the 'anchor' coordonates if you change those images listed below.
  7.     var imgImplantationsHover = 'puce-implantation-hover.png';
  8.     var imgRondsHover = 'puce-realisation-over.png';
  9.     //
  10.     // ################################################################# TEXT FOR DEMO // 
  11.     var text29 = "<h3>Bouin</h3>";
  12.     text29 += "<div class='mapcontent'><img src='eoliennes.jpg' class='alignLeft'/><b>Vendée : 19,5MW</b><br />Mise en service depuis 2003 dont 7,5 MW cédés (DVAS).</div>";
  13.  
  14.     var text47 = "<h3>Chemin d\'Ablis</h3>";
  15.     text47 += "<div class='mapcontent'><strong>Eure-et-Loir : 52,0 MW</strong><br />Mise en service en 2008<br />O&amp;M : oui</div>";
  16.  
  17.     var text48 = "<h3>Les Barthes</h3>";
  18.     text48 += "<div class='mapcontent'><strong>Haute-Loire : 16,0 MW</strong><br />Mise en service en 2009<br />O&amp;M : oui</div>";
  19.  
  20.     var text49 = "<h3>Freyssenet</h3>";
  21.     text49 += "<div class='mapcontent'><strong>Ardèche : 10,0 MW</strong><br />Mise en service en 2007, centrale cédée (DVAS)<br />O&amp;M : oui</div>";
  22.  
  23.  
  24.     function initCarte(){
  25.         var tMarker, tMarkerLng, oMarker, oMapOptions, oMap, myInfoBox, myInfoBoxOptions, i;
  26.     // ################################################################# Markers Contents Table // 
  27.         var tMarker = [
  28.         
  29.         
  30.                 { 'lat' :46.57773, 'lon' : 2.23477, 'title' :'Bouin', 'info' :text29, 'picto':'puce-bleue3.png', 'isImplantation':'flase','type':'blue'},       
  31.                 { 'lat' :48.14582, 'lon' : 1.461764, 'title' :'Chemin d\'Ablis', 'info' :text47, 'picto':'puce-bleue3.png', 'isImplantation':'flase','type':'orange'},      
  32.                 { 'lat' :44.563701, 'lon' : 4.41085, 'title' :'Les Barthes', 'info' :text48, 'picto':'puce-bleue3.png', 'isImplantation':'flase','type':'gris'},        
  33.                 { 'lat' :44.683301, 'lon' : 4.540787, 'title' :'Freyssenet', 'info' :text49, 'picto':'puce-bleue3.png', 'isImplantation':'tru','type':'blue'},              
  34.         ];
  35.         tMarkerLng = tMarker.length;
  36.  
  37.     // ################################################################# Arguments for the map & create map // 
  38.  
  39.         mapOptions = {
  40.             'zIndexBulle' : 1,
  41.             'zoom' : 5,
  42.             'center' : new google.maps.LatLng( 46.80, 1.75),
  43.             'mapTypeId' : google.maps.MapTypeId.TERRAIN,
  44.             'styles' : [ { "featureType": "administrative.country", "stylers": [ { "lightness": 60 }, { "visibility": "off" } ] }, { "featureType": "road", "stylers": [ { "visibility": "on" }, { "saturation": -36 }, { "lightness": 47 } ] },{ "featureType": "poi" },{ "featureType": "administrative.locality", "stylers": [ { "lightness": 52 }, { "visibility": "on" } ] },{ "featureType": "administrative.province", "stylers": [ { "visibility": "off" } ] },{ "featureType": "poi", "stylers": [ { "visibility": "simplified" } ] },{ "featureType": "transit", "stylers": [ { "visibility": "off" } ] },{ "elementType": "geometry.stroke", "stylers": [ { "visibility": "off" } ] },{ } ]
  45.         }
  46.     
  47.         mapOptions = $.extend({
  48.             scrollwheel: false,
  49.             streetViewControl:false,
  50.             mapTypeControl: false,
  51.             scaleControl: false,
  52.             zoomControlOptions: {
  53.                 style: google.maps.ZoomControlStyle.SMALL
  54.             }
  55.         }, mapOptions);
  56.  
  57.         oMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  58.  
  59.     // ################################################################# InfoBox, 'js/infobox.js' needed// 
  60.         
  61.         myInfoBoxOptions = {
  62.             content: "",
  63.             disableAutoPan: false,
  64.             maxWidth: 0,
  65.             pixelOffset: new google.maps.Size(25, -10),
  66.             zIndex: null,
  67.             boxClass: "infoBoxNlg",
  68.             closeBoxURL: "close.png",
  69.             infoBoxClearance: new google.maps.Size(1, 1),
  70.             isHidden: false,
  71.             pane: "floatPane",
  72.             enableEventPropagation: false
  73.         };
  74.         myInfoBox = new InfoBox(myInfoBoxOptions);
  75.  
  76.     // ################################################################# Create Markers From "tMarker" Table
  77.  
  78.         for( i = 0; i < tMarkerLng; i++){
  79.  
  80.             var imageMarker;
  81.             if(tMarker[i].isImplantation == "true"){
  82.                 imageMarker = {
  83.                     url: tMarker[i].picto,
  84.                     anchor: new google.maps.Point(8, 25)
  85.                 };
  86.             } else {
  87.                 imageMarker = {
  88.                     url: tMarker[i].picto,
  89.                     anchor: new google.maps.Point(0, 0)
  90.                 };
  91.             }
  92.             
  93.             oMarker = new google.maps.Marker({
  94.                 'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
  95.                 'map' : oMap,
  96.                 //'title' : tMarker[i].title,
  97.                 'icon' : imageMarker,
  98.                 'zIndex': i,
  99.                 'number' : i,
  100.                 'animation': google.maps.Animation.DROP,
  101.                 
  102.             });
  103.  
  104.  
  105.     // ################################################################# MOUSE OVER / MOUSE OUT statements
  106.  
  107.             google.maps.event.addListener( oMarker, 'mouseover', function(){
  108.         
  109.                 // set selected marker above all others
  110.                 this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
  111.                 
  112.                 // set marker image for "over" behavior
  113.                 var imageMarkerOver;
  114.                 if(tMarker[this.number].isImplantation == "true"){
  115.                     imageMarkerOver = {
  116.                         url: imgImplantationsHover,
  117.                         anchor: new google.maps.Point(8, 25)
  118.                     };
  119.                 } else {
  120.                     imageMarkerOver = {
  121.                         url: imgRondsHover,
  122.                         anchor: new google.maps.Point(0, 0)
  123.                     };
  124.                 }
  125.                 // Refresh Icon with the new url & anchor
  126.                 this.setIcon(imageMarkerOver);
  127.                 
  128.                 // Refresh infoBox content
  129.                 myInfoBox.setContent("<div class='fond'></div><div class='contentInfoBox'>" + tMarker[this.number].info + "</div>");
  130.         
  131.                 // Open infoBox
  132.                 myInfoBox.open(oMap, this);
  133.         
  134.             });
  135.             
  136.             google.maps.event.addListener( oMarker, 'mouseout', function(){
  137.                 //IF you want the infoxBox closes on MouseOver, uncomment the line below
  138.                 // myInfoBox.close(oMap, this);     
  139.                 // Switch marker image for "over" behavior
  140.                 var imageMarkerOut;
  141.                 if(tMarker[this.number].isImplantation == "true"){
  142.                     imageMarkerOut = {
  143.                         url: tMarker[this.number].picto,
  144.                         anchor: new google.maps.Point(8, 25)
  145.                     };
  146.                 } else {
  147.                     imageMarkerOut = {
  148.                         url: tMarker[this.number].picto,
  149.                         anchor: new google.maps.Point(0, 0)
  150.                     };
  151.                 }
  152.                 // Refresh Icon with the new url & anchor
  153.                 this.setIcon(imageMarkerOut);
  154.             });
  155.             
  156.         oMarker.locid = i+1;
  157.         if(oMarker.length == tMarker.length) doFilter();
  158.         
  159.         }
  160. //var markers = [];
  161. var locIndex;
  162. var tMarker = [];
  163.     function doFilter() {
  164.         if(!locIndex) {
  165.             locIndex = {};
  166.             //I reverse index markers to figure out the position of loc to marker index
  167.             for(var x=0, len=oMarker.length; x<len; x++) {
  168.                 locIndex[oMarker[x].locid] = x;
  169.             }
  170.         }
  171.         //what's checked?
  172.         var checked = $("input[type=checkbox]:checked");
  173.         var selTypes = [];
  174.         for(var i=0, len=checked.length; i<len; i++) {
  175.             selTypes.push($(checked[i]).val());
  176.         }
  177.         for(var i=0, len=tMarker.length; i<len; i++) {
  178.             //var sideDom = "p.loc[tMarker-locid="+(i+1)+"]";
  179.             //Only hide if length != 0
  180.             if(checked.length !=0 && selTypes.indexOf(tMarker[i].type) < 0) {
  181.                 //$(sideDom).hide();
  182.                 this.set_map(null);
  183.                 this.tMarker[locIndex[i+1]].setvisible(false);
  184.             } else {
  185.                 //$(sideDom).show();
  186.                 this.tMarker[locIndex[i+1]].setvisible(true);
  187.             }
  188.         }
  189.     }$(document).on("click", "input[type=checkbox]", doFilter); 
  190.     
  191.     }   
  192.     google.maps.event.addDomListener( window, 'load', initCarte);
  193.  
  194. });

y este es mi código HTML

Código HTML: 
Ver original
  1. <DIV id="controlcontent">
  2. <INPUT name="blues" class="control" type="checkbox"checked="checked" value="blue"> blue 
  3. <INPUT name="oranges" class="control" type="checkbox" checked="checked" value="orange"> orange 
  4. <INPUT name="vertes" class="control" type="checkbox" checked="checked" value="verte"> verde 
  5. <INPUT name="griss" class="control" type="checkbox" checked="checked" value="gris"> gris
  6.  
  7. </DIV>
  8.  
  9.  
  10. <DIV id="map_canvas"></DIV>
  11.  
  12. <SCRIPT src="jquery-1.9.1.min.js" type="text/javascript"></SCRIPT>
  13.          
  14. <SCRIPT src="js.js" type="text/javascript"></SCRIPT>
  15.          
  16. <SCRIPT src="infobox.js" type="text/javascript"></SCRIPT>
  17.      
  18. <SCRIPT src="custom.js" type="text/javascript"></SCRIPT>
el archivo infobox es para mostrar uan caja de texto cuando el mouse esta sobre el marcador

espero que puedan ayudarme ya que no entiendo por que no me oculta los marcadores muchas gracias

Etiquetas: custom, filtrar, google, html, input, javascript, jquery, js, maps, select
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:24.