CODEWITHSUNDEEP
javascriptgoogle-maps
kennechu
kennechu

Reputation: 1422

Problems hiding google maps marker onClick event

I have put some markers for specific locations in a map, and I have two buttons, one to hide all the markers (clearOverlays) and other to show them again (showOverlays) but it isn't working. In my JavaScript console I am getting this error : Cannot call method 'setMap' of undefined

Here's my code..

// COORDENADAS
var coordenadas = [
  ['Punto 1',   19.558061,-99.296344, 4],
  ['Punto 2',  19.55886, -99.296886,  5],
  ['Punto 3',19.559103, -99.296688,  3],
  ['Punto 4',   19.560164,-99.297347, 2],
  ['Punto 5',19.560073,-99.296064, 1]
];


 var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 16,
  center: new google.maps.LatLng( 19.561883, -99.298287),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});


var ventana = new google.maps.InfoWindow();
var marcador, i;

for (i = 0; i < coordenadas.length; i++) {  
        marcador = new google.maps.Marker
        ({

          position: new google.maps.LatLng(coordenadas[i][1], coordenadas[i][2]),
          animation: google.maps.Animation.DROP,
          map: map

        });


        google.maps.event.addListener(
                marcador, 'mouseover', (function(marcador, i) {
                    return function() {
                      ventana.setContent(coordenadas[i][0]);
                      ventana.open(map, marcador);
                    }
                })(marcador, i)
        );

  }


function clearOverlays(map) {
  for (var i = 0; i < coordenadas.length; i++) {
    marcador[i].setMap(null);
  }      
  setAllMap(null);
  console.log('click Ocultar');
}

function showOverlays(map) {
  for (var i = 0; i < coordenadas.length; i++) {
    marcador[i].setMap(map);
  }      
  setAllMap(map);
  console.log('click Mostar');
}

Upvotes: 0

Views: 641

Answers (1)

geocodezip
geocodezip

Reputation: 161384

marcador is not an array. marcador[i] doesn't exist. That gives the error message: Cannot call method 'setMap' of undefined

You need an array of google.maps.Marker objects.

var gmarkers = [];

function clearOverlays(map) {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
  }      
}

function showOverlays(map) {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(map);
  }      
}  

for (i = 0; i < coordenadas.length; i++) {  
        var marcador = new google.maps.Marker
        ({
          position: new google.maps.LatLng(coordenadas[i][1], coordenadas[i][2]),
          animation: google.maps.Animation.DROP,
          map: map

        });
        gmarkers.push(marcador);

        google.maps.event.addListener(
                marcador, 'mouseover', (function(marcador, i) {
                    return function() {
                      ventana.setContent(coordenadas[i][0]);
                      ventana.open(map, marcador);
                    }
                })(marcador, i)
        );
  }

working example

Upvotes: 1

Related Questions