-1

I've build a navigation to show/hide different marker-categories on a google maps. Each marker shows a infoWindow on click. I would like to close the open infoWindow if the marker-category is clicked. I have tried to work in this solution Close all info windows google maps API V3?, but cant make it work. I've got this Toggle function: 

//toggle visibility of Marker Categories
function toggleGroup(type, elem, infoWindow, map) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
      elem.classList.add('active');
    } else {
      marker.setVisible(false);
      elem.classList.remove('active');
    }
  }
}

fiddle: http://jsfiddle.net/vanith/upn9qms0/28/

Community
  • 1
  • 1
vanith
  • 3
  • 3

1 Answers1

0

If you want the infoWindow to be accessible in the toggleGroup function, you need to pass it in to the function, which you don't do on the click events (the function takes four arguments, you only pass in two):

toggleGroup('hotel', this);

// function definition
function toggleGroup(type, elem, infoWindow, map) {
// ...

One option is to make the map and infoWindow global and close it whenever the toggleGroup function is called.

//toggle visibility of Marker Categories
function toggleGroup(type, elem) {
  infoWindow.close();
  // ...

updated fiddle

code snippet:

// global variables
var infoWindow = new google.maps.InfoWindow();
var map;

//toggle visibility of Marker Categories
function toggleGroup(type, elem) {
  // close infowindow
  infoWindow.close();

  for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
      elem.classList.add('active');
    } else {
      marker.setVisible(false);
      elem.classList.remove('active');
    }
  }

}


// INIT
function load() {
  // Create Map
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(48.130266, 11.537999),
    zoom: 15,
    styles: styles,
    mapTypeControl: false,
    streetViewControl: false
  });

  // Home Polygon - Construct the polygon.
  var homepoly = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#003781',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#009ee0',
    fillOpacity: 0.2
  });
  homepoly.setMap(map);

  // downloadUrl("phpsqlajax_genxml.php", function(data) {
  var xml = parseXml(xmlStr); // data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var website = markers[i].getAttribute("website");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng"))
    );
    bounds.extend(point);
    var type = markers[i].getAttribute("type");
    var html = "<b>" + name + "</b> <br/>" + address + "<br/><a href='" + website + "' target='_blank'>" + website + "</a>";
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon
    });
    markerGroups[type].push(marker);
    bindInfoWindow(marker, map, infoWindow, html);
  }
  // });
  map.fitBounds(bounds);


  //Print dat maps!
  var printMaps = function() {
    var body = $('body'),
      mapContainer = $('#map'),
      mapContainerParent = mapContainer.parent(),
      printContainer = $('<div>');
    body.prepend(printContainer);
    printContainer
      .addClass('print-container')
      .css('position', 'relative')
      .height('body.height()')
      .append(mapContainer);
    var content = body.children()
      .not('script')
      .not(printContainer)
      .detach();
    window.print();
    body.prepend(content);
    mapContainerParent.prepend(mapContainer);
    printContainer.remove();
  };
  $('.map-print').on('click', printMaps);

  // CLOSE INIT
}

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

}


google.maps.event.addDomListener(window, 'load', load);

// Home Polygon - Define the LatLng coordinates for the polygon's path.
var triangleCoords = [{
  lat: 48.130723,
  lng: 11.536538
}, {
  lat: 48.130466,
  lng: 11.536259
}, {
  lat: 48.129191,
  lng: 11.538692
}, {
  lat: 48.130265,
  lng: 11.538976
}, {
  lat: 48.130265,
  lng: 11.538402
}, {
  lat: 48.130602,
  lng: 11.538402
}, {
  lat: 48.131114,
  lng: 11.537206
}, {
  lat: 48.130659,
  lng: 11.536755
}];


//Get Data of XML
function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}

var xmlStr = '<markers><marker name="Medienfabrik" address="Ganghoferstraße 68,80339 München" website="http://medienfabrik-muenchen.de/" lat="48.129975" lng="11.538764" type="home"/><marker name="Kongressbar" address="Theresienhöhe 15,80339 München" website="http://www.kongressbar.de" lat="48.1322911" lng="11.543943" type="bar"/><marker name="Motel One" address="" lat="48.13969" lng="11.53710" type="hotel"/><marker name="Stragula" address="" lat="48.13233" lng="11.53622" type="restaurant"/><marker name="Rossmann" address="" lat="48.133740" lng="11.545614" type="shopping"/><marker name="Bavariapark" address="" lat="48.131110" lng="11.542562" type="freizeit"/><marker name="Deutsches Museum Verkehrszentrum" address="" lat="48.132616" lng="11.542766" type="kultur"/></markers>';


var markerGroups = {
  "home": [],
  "bar": [],
  "hotel": [],
  "restaurant": [],
  "shopping": [],
  "freizeit": [],
  "kultur": []
};

var customIcons = {
  home: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
  },
  bar: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/green.png'
  },
  hotel: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/orange.png'
  },
  restaurant: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/red.png'
  },
  shopping: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png'
  },
  freizeit: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/purple.png'
  },
  kultur: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/grey.png'
  }
};

// Create an array for Individuall Map-styles.
var styles = [{
  "featureType": "landscape.man_made",
  "elementType": "geometry.stroke",
  "stylers": [{
    "color": "#000000"
  }]
}, {
  "featureType": "administrative.locality",
  "elementType": "all",
  "stylers": [{
    "visibility": "on"
  }, {
    "hue": "#2c2e33"
  }, {
    "saturation": 7
  }, {
    "lightness": 19
  }]
}, {
  "featureType": "landscape",
  "elementType": "all",
  "stylers": [{
    "visibility": "simplified"
  }, {
    "hue": "#ffffff"
  }, {
    "saturation": -100
  }, {
    "lightness": 21
  }]
}, {
  "featureType": "poi",
  "elementType": "all",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "water",
  "elementType": "all",
  "stylers": [{
    "visibility": "simplified"
  }, {
    "color": "#009ee0"
  }]
}, {
  "featureType": "transit.station",
  "elementType": "all",
  "stylers": [{
    "visibility": "simplified"
  }, {
    "hue": "#009ee0"
  }, {
    "saturation": 0
  }, {
    "lightness": 0
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry.fill",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#a4d65e"
  }, {
    "lightness": 0
  }]
}, {
  "featureType": "transit.line",
  "elementType": "geometry",
  "stylers": [{
    "color": "#4d4d4d"
  }, {
    "lightness": 70
  }]
}, {
  "featureType": "road",
  "elementType": "labels.text",
  "stylers": [{
    "color": "#003781"
  }]
}, {
  "featureType": "road",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "color": "#ffffff"
  }]
}, {
  "featureType": "poi.business",
  "elementType": "geometry.fill",
  "stylers": [{
    "visibility": "off"
  }, {
    "hue": "#000000"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "all",
  "stylers": [{
    "hue": "#ffcc00"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry.fill",
  "stylers": [{
    "hue": "#ffffff"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry.stroke",


  "stylers": [{
    "color": "#eeeeee"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#ffffff"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry.stroke",
  "stylers": [{
    "color": "#eeeeee"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "labels.icon",
  "stylers": [{
    "hue": "#ffcc00"
  }, {
    "saturation": 50
  }, {
    "lightness": 0
  }]
}]
body {
  font-family: arial;
}
#map {
  position: relative;
}
.filters {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 20px;
  left: 20px;
  border: 0px solid #999;
  border-radius: 2px;
  padding: 0;
  z-index: 999;
}
.filters ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.filters ul li {
  display: block;
  padding: 10px 15px 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #e4e4e4;
  border-bottom-color: rgba(228, 228, 228, 0.8);
  margin-bottom: -1px;
  font-size: 14px;
  color: #666;
}
.filters ul li img {
  margin: 0 3px -4px 0;
}
.filters ul li#bar.active {
  background: #e4002b;
  color: #fff;
}
.filters ul li#hotel.active {
  background: #00a9e0;
  color: #fff;
}
.filters ul li#restaurant.active {
  background: #ffcd00;
  color: #fff;
}
.filters ul li#shopping.active {
  background: #df1995;
  color: #fff;
}
.filters ul li#freizeit.active {
  background: #97d700;
  color: #fff;
}
.filters ul li#kultur.active {
  background: #7d55c7;
  color: #fff;
}
.filters ul li a img {
  margin: 0 5px -3px 0;
}
.filters ul li#bar:hover,
.filters ul li#hotel:hover,
.filters ul li#restaurant:hover,
.filters ul li#shopping:hover,
.filters ul li#freizeit:hover,
.filters ul li#kultur:hover {
  opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="filters">
  <ul>
    <li id="bar" onclick="toggleGroup('bar', this);" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/green.png" />Bars</li>
    <li id="hotel" onclick="toggleGroup('hotel', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/orange.png" />Hotel</li>
    <li id="restaurant" onclick="toggleGroup('restaurant', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/red.png" />Restaurant</li>
    <li id="shopping" onclick="toggleGroup('shopping', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/yellow.png" />Shopping</li>
    <li id="freizeit" onclick="toggleGroup('freizeit', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/purple.png" />Freizeit & Wellness</li>
    <li id="kultur" onclick="toggleGroup('kultur', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/grey.png" />Kunst & Kultur</li>
    <li class="map-print">Drucken</li>
  </ul>
</div>
<div id="map" style="width: 100%; height: 400px"></div>
geocodezip
  • 158,664
  • 13
  • 220
  • 245