javascript - Google Maps Marker Show/hide

Question

I tried several codes and searched a lot for an answer, but I can't get this to work. I know very little of Javascript, so i'm hopping someone can help me with this, cause i'm losing my mind with this. The markers are not toggling, just nothing happens.

     var customIcons = {
  monumento: {
    icon: 'images/monumento_ico.png'
  },
  hotel: {
    icon: 'images/hotel_ico.png'
  },
  restaurantes: {
    icon: 'images/restaurante_ico.png'
  },
  museus: {
    icon: 'images/museu_ico.png'
  }
};

var markerGroups = { "museus": [], "monumentos": [], "restaurantes": [], "hotel": []};
var gmarkers = [];

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(38.639104, -8.210413),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;



map.set('styles', [
{
zoomControl: false,
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
  { color: "#ffd986" }
]
},{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [
  { color: "#9e574f" }
]
},{
featureType: "road.local",
elementType: "geometry.fill",
stylers: [
  { color: "#d0cbc0" },
  { weight: 1.1 }

]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [
  { saturation: -100 }
]
}, {
featureType: 'landscape',
elementType: 'geometry',
stylers: [
  { hue: '#ffff00' },
  { gamma: 1.4 },
  { saturation: 82 },
  { lightness: 96 }
]
}, {
featureType: 'poi.school',
elementType: 'geometry',
stylers: [
  { hue: '#fff700' },
  { lightness: -15 },
  { saturation: 99 }
]
}
]);

downloadUrl("markers.xml",  function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");

var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
type: type
});

bindInfoWindow(marker, map, infoWindow, html);
}
});
}

function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
markerGroups[type].push(marker);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  } 
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);

});
}

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, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}

This is the HTML:

<div class="map_wrap">
<div class="siderbarmap">
<ul>
<input id="monumentoCheckbox" type="checkbox" onclick="toggleGroup('monumento')">
<input id="museusCheckbox" type="checkbox" onclick="toggleGroup('museus')">
<input id="restaurantesCheckbox" type="checkbox" onclick="toggleGroup('restaurantes')">
<input id="hotelCheckbox" type="checkbox" onclick="toggleGroup('hotel')">


</ul>

</div>

<div id="map" style="width:100%;height:585px; z-index: 1;"></div>

This is the XML Thank you so much for any help you can give!

<markers>
<marker name="Castelo" address="Rua da Condessa de Valen?a" lat="38.64351973190569" lng="-8.216521812152905" type="monumento" />
<marker name="Anta 1 de Tourais" address="Estrada Nacional 114" lat="38.64260059929888" lng="-8.159376865959189" type="monumento" />


<marker name="Hotel da Ameira" address="Herdade da Ameira" lat="38.64109640475479" lng="-8.180432206726096" type="hotel" />
<marker name="Hotel Montemor" address="Avenida Gago Coutinho 8, 7050-248 Montemor-o-Novo" lat="38.64925541964039" lng="-8.216489625644726" type="hotel" />

<marker name="Restaurante Monte Alentejano" address="Av. Gago Coutinho 8" lat="38.6492329" lng="-8.216665" type="restaurantes" />
<marker name="Restaurante A Ribeira" address="Rua de S?o Domingos" lat="38.6347498199708" lng="-8.206468892765088" type="restaurantes" />

<marker name="Núcleo Museológico do Convento de S. Domingos" address="" lat="38.643139" lng="-8.212732" type="museus" />
<marker name="Centro Interpretativo do Castelo de Montemor-o-Novo" address="Rua Condessa de Valen?a" lat="38.64258748216167" lng="-8.21467108793263" type="museus" />


</markers>

Answer 1

working fiddle

You need to look at the javascript console.

• fixed createMarker to use v3 syntax and used it.
• initialized arrays in markerGroups[type]
• there is no .isHidden method for a google.maps.Marker it is .getVisible.
• there are no .show() or .hide() methods for a google.maps.Marker, it is .setVisible.
• there are no marker shadows in v3 since the implementation of the "visual refresh"

(can't test your custom markers, you didn't provide them)

working code snippet:

var infoWindow = new google.maps.InfoWindow();
var customIcons = {
  monumento: {
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png'
  },
  hotel: {
    icon: 'http://maps.google.com/mapfiles/ms/icons/green.png'
  },
  restaurantes: {
    icon: 'http://maps.google.com/mapfiles/ms/icons/yellow.png'
  },
  museus: {
    icon: 'http://maps.google.com/mapfiles/ms/icons/purple.png'
  }
};

var markerGroups = {
  "museus": [],
  "monumentos": [],
  "restaurantes": [],
  "hotel": []
};

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(38.639104, -8.210413),
    zoom: 12,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow();



  map.set('styles', [{
    zoomControl: false
  }, {
    featureType: "road.highway",
    elementType: "geometry.fill",
    stylers: [{
      color: "#ffd986"
    }]
  }, {
    featureType: "road.arterial",
    elementType: "geometry.fill",
    stylers: [{
      color: "#9e574f"
    }]
  }, {
    featureType: "road.local",
    elementType: "geometry.fill",
    stylers: [{
        color: "#d0cbc0"
      }, {
        weight: 1.1
      }

    ]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [{
      saturation: -100
    }]
  }, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [{
      hue: '#ffff00'
    }, {
      gamma: 1.4
    }, {
      saturation: 82
    }, {
      lightness: 96
    }]
  }, {
    featureType: 'poi.school',
    elementType: 'geometry',
    stylers: [{
      hue: '#fff700'
    }, {
      lightness: -15
    }, {
      saturation: 99
    }]
  }]);

  //         downloadUrl("markers.xml", function (data) {
  var xml = xmlParse(xmlData);
  // var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var type = markers[i].getAttribute("type");

    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    var html = "<b>" + name + "</b> <br/>" + address;
    // var icon = customIcons[type] || {};
    var marker = createMarker(point, name, address, type, map);
    bindInfoWindow(marker, map, infoWindow, html);
  }
  // });
}

function createMarker(point, name, address, type, map) {
  var icon = customIcons[type] || {};
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    // shadow: icon.shadow,
    type: type
  });
  if (!markerGroups[type]) markerGroups[type] = [];
  markerGroups[type].push(marker);
  var html = "<b>" + name + "</b> <br/>" + address;
  bindInfoWindow(marker, map, infoWindow, html);
  return marker;
}

function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
    } else {
      marker.setVisible(false);
    }
  }
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });
}

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, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}
google.maps.event.addDomListener(window, 'load', load);

var xmlData = '<markers><marker name="Castelo" address="Rua da Condessa de Valen?a" lat="38.64351973190569" lng="-8.216521812152905" type="monumento" /><marker name="Anta 1 de Tourais" address="Estrada Nacional 114" lat="38.64260059929888" lng="-8.159376865959189" type="monumento" /><marker name="Hotel da Ameira" address="Herdade da Ameira" lat="38.64109640475479" lng="-8.180432206726096" type="hotel" /><marker name="Hotel Montemor" address="Avenida Gago Coutinho 8, 7050-248 Montemor-o-Novo" lat="38.64925541964039" lng="-8.216489625644726" type="hotel" /><marker name="Restaurante Monte Alentejano" address="Av. Gago Coutinho 8" lat="38.6492329" lng="-8.216665" type="restaurantes" /><marker name="Restaurante A Ribeira" address="Rua de S?o Domingos" lat="38.6347498199708" lng="-8.206468892765088" type="restaurantes" /><marker name="Núcleo Museológico do Convento de S. Domingos" address="" lat="38.643139" lng="-8.212732" type="museus" /><marker name="Centro Interpretativo do Castelo de Montemor-o-Novo" address="Rua Condessa de Valen?a" lat="38.64258748216167" lng="-8.21467108793263" type="museus" /></markers>';

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

html,
body,
#map,
#map_wrap {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="map_wrap">
  <div class="siderbarmap">
    <ul>
      Monuments (blue)
      <input id="monumentoCheckbox" type="checkbox" onclick="toggleGroup('monumento')" checked="checked" />Museums (purple)
      <input id="museusCheckbox" type="checkbox" onclick="toggleGroup('museus')" checked="checked" />Restaurants (yellow)
      <input id="restaurantesCheckbox" type="checkbox" onclick="toggleGroup('restaurantes')" checked="checked" />Hotels (green)
      <input id="hotelCheckbox" type="checkbox" onclick="toggleGroup('hotel')" checked="checked" />
    </ul>
  </div>
  <div id="map" style="width:100%;height:585px; z-index: 1;"></div>
</div>