Cómo ocultar Google Maps Api Markers con jQuery

Hola, esta podría ser una pregunta muy tonta, pero estoy tratando de hacer que los marcadores desaparezcan cuando se haga clic en . El marcador está ubicado correctamente en el mapa, pero cuando hago clic en él, no hace nada. Me preguntaba por qué no está funcionando. ¡Gracias!Cómo ocultar Google Maps Api Markers con jQuery

<script type="text/javascript" src="jQuery.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function(){ 
     var myOptions = { 
     center: new google.maps.LatLng(40.1, -88.2), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var myLatlng = new google.maps.LatLng(40.1, -88.2); 
     var temp_marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title:"Hello World!" 
     }); 

     console.log($(temp_marker)); 
     console.log(temp_marker); 

     //temp_marker.click(function(){$(this).hide();}); 

     $(temp_marker).click(function(){console.log("click is working"); $(this).hide();}); 
      }); 
    </script> 
</head> 
<body> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body>

Fuente

2012-03-07 wayfare

temp_marker es un objeto de JavaScript, no un elemento DOM. Para adjuntar un oyente al marcador (la API se encargará de los aspectos específicos de los cuales el elemento DOM que se unen a y cómo), se debe usar el propio sistema de eventos de Google Maps API como:

google.maps.event.addListener(marker, 'click', function() { 
    marker.setVisible(false); // maps API hide call 
    });

su documentación: Google Maps Javascript API v3 - Events

Fuente

2012-03-07 00:42:44

¿significa eso que no puedo aplicar jQuery a la mayoría de los objetos de Google Maps? – wayfare

@wayfare la API de Maps pone una capa de abstracción entre los elementos DOM que crea para los marcadores y el implementador. Puede haber trucos para acceder a los elementos DOM directamente, pero no hay rutas admitidas. Cualquier intento de manipular los elementos directamente estaría sujeto a rotura tan pronto como Google Maps realice un cambio interno; también podría no funcionar entre navegadores. –

Si agrega la opción optimizada: falso en la declaración de marcador, puede acceder a ella mediante jQuery, pero la API restablece toda la configuración a las predeterminadas a medida que mueve el mapa, acerca o aleja, por lo tanto, la mejor manera es usar setVisible, ya que mantendrá esa configuración. – Corner

es un objeto de Google Maps, no un elemento DOM. Jquery trabaja en elementos DOM.

Fuente

2012-03-07 00:43:02 charlietfl

no estoy seguro de que sólo se puede ocultar el marcador, pero el gancho apropiado para el evento click habría que hacer algo como esto cuando se declara

google.maps.event.addListener(marker, 'click', function() { 
    // do your hide here 
});

Puede que tenga que quitar el marcador del mapa en lugar de "ocultarlo".

¿Para qué estás tratando de ocultar los marcadores? ¿Tienes que ser capaz de volver a mostrar el marcador? ¿Cómo planeas lograr esto?

Fuente

2012-03-07 00:48:11

Ben le proporcionó la mitad de la respuesta. Una vez que es capaz de detectar el evento de clic de marcador, necesita "ocultar" o eliminar el marcador del mapa. La forma habitual de hacer esto con los mapas de Google es hacer esto:

this.setMap(null);

A continuación, puede mostrar el mapa de nuevo sea utilizando setMap de asignar a su objeto de mapa en lugar de null.

Fuente

2012-03-07 17:28:39

Ampliando notas de Ben, esto debe ir a donde se ha declarado el marcador - por ejemplo:

var beachMarker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: image 
}); 
google.maps.event.addListener(beachMarker, 'click', function() { 
    beachMarker.setVisible(false); // maps API hide call 
}); 
}

Me ha tomado las edades tratando de resolver esto. ¡Gran crédito para Ben! ¡Gracias!

Fuente

2014-05-23 14:10:38

Cómo ocultar Google Maps Api Markers con jQuery

Respuesta

Cuestiones relacionadas