我希望Google地图中的信息窗口在点击其他图标时自动关闭

Question

我使用了一个时髦的地图示例，我希望当点击另一个图标时，infowindow会自动关闭？

我为标记设置了一些变量，因为我希望每个标记都是不同的颜色。然后，我将每个标记var称为保存信息的info变量。

任何帮助都会受到极大的欢迎，因为我是Web开发的新手。

$(function() {
  var mapStyle = [{
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#444444"
    }]
  },
    {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [{
        "color": "#f2f2f2"
      }]
    },
    {
      "featureType": "landscape.natural",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      },
        {
          "color": "#e6e6e6"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
        "saturation": -100
      },
        {
          "lightness": 45
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "on"
      },
        {
          "hue": "#ff0000"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "all",
      "stylers": [{
        "visibility": "simplified"
      }]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#fd9836"
      },
        {
          "saturation": "85"
        },
        {
          "lightness": "31"
        },
        {
          "gamma": "1.24"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "labels.text",
      "stylers": [{
        "visibility": "simplified"
      }]
    },
    {
      "featureType": "road.arterial",
      "elementType": "geometry.fill",
      "stylers": [{
        "hue": "#ff0000"
      },
        {
          "saturation": "1"
        }
      ]
    },
    {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "transit",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "transit.station",
      "elementType": "all",
      "stylers": [{
        "visibility": "simplified"
      },
        {
          "hue": "#ff0000"
        },
        {
          "saturation": "-100"
        }
      ]
    },
    {
      "featureType": "transit.station.airport",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }]
    },
    {
      "featureType": "transit.station.bus",
      "elementType": "all",
      "stylers": [{
        "visibility": "simplified"
      }]
    },
    {
      "featureType": "transit.station.rail",
      "elementType": "all",
      "stylers": [{
        "visibility": "simplified"
      },
        {
          "hue": "#ff7e00"
        },
        {
          "saturation": "-100"
        },
        {
          "lightness": "19"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "color": "#d7d7d7"
      },
        {
          "visibility": "on"
        }
      ]
    }
  ];

  // Create the map
  var map = new google.maps.Map($('.map-canvas')[0], {
    zoom: 8,
    styles: mapStyle,
    center: new google.maps.LatLng(53.685429, -1.503624)
  });


  var adamDawson = new google.maps.Marker({
    position: new google.maps.LatLng(53.992120, -1.541812), //harrogate
    map: map,
    title: 'click for details',
    icon: '../fda_map_2/assets/images/icon_green.png'
  });

  var andrewGomersall = new google.maps.Marker({
    position: new google.maps.LatLng(53.792036, -1.539607), //jrc.agency
    map: map,
    title: 'click for details',
    icon: '../fda_map_2/assets/images/icon_dark_green.png'
  });

  var chloeFrank = new google.maps.Marker({
    position: new google.maps.LatLng(51.519962, -0.109158), //we make websites
    map: map,
    title: 'click for details',
    icon: '../fda_map_2/assets/images/icon_green.png'
  });

  var darrenSmith = new google.maps.Marker({
    position: new google.maps.LatLng(53.716489, -1.640213), //buffalo web design
    map: map,
    title: 'click for details',
    icon: '../fda_map_2/assets/images/icon_orange.png'
  });

  var geniusDivision = new google.maps.Marker({
    position: new google.maps.LatLng(53.555143, -1.479377), //geniusdivision
    map: map,
    title: 'click for details',
    icon: '../fda_map_2/assets/images/icon_orange.png'
  });

  // Add a Snazzy Info Window to the marker

  var info = new SnazzyInfoWindow({
    marker: adamDawson,
    content: '<h2>Adam Dawson</h2>' +
    '<p>Freelance Web Designer & Developer</p>' +
    '<a class="work-url" href="http://www.dawsony.com/" target="_blank">Adam Dawson - Web Design & Development</a>',
    closeOnMapClick: true
  });

  var info = new SnazzyInfoWindow({
    marker: andrewGomersall,
    content: '<h2>Andrew Gomersall</h2>' +
    '<p>Lead Developer</p>' +
    '<a class="work-url" href="https://jrc.agency/" target="_blank">jrc.agency</a>',
    closeOnMapClick: true
  });

  var info = new SnazzyInfoWindow({
    marker: chloeFrank,
    content: '<h2>Chloe Frank</h2>' +
    '<p>Front-End Developer</p>' +
    '<a class="work-url" href="https://wemakewebsites.com/" target="_blank">We Make Websites</a>',
    closeOnMapClick: true
  });

  var info = new SnazzyInfoWindow({
    marker: darrenSmith,
    content: '<h2>Darren Smith</h2>' +
    '<p>Web Developer</p>' +
    '<a class="work-url" href="https://www.buffalowebdesign.co.uk/contact/" target="_blank">Buffalo Web Design</a>',
    closeOnMapClick: true
  });

  var info = new SnazzyInfoWindow({
    marker: geniusDivision, //genius div
    content:

    '<div class="genius-wrap">' +
    '<img src="../fda_map_2/assets/images/icon.png">' +

    '<h2>Craig Burgess</h2>' +
    '<p>Creative Director</p>' +

    '<a class="work-url" href="https://www.geniusdivision.com/" target="_blank">Genius Division</a>' +

    '<h2>James Sheriff</h2>' +
    '<p>Business Development Director</p>' +

    '<a class="work-url" href="https://www.geniusdivision.com/" target="_blank">Genius Division</a>' +

    '<h2>Aaron Linley</h2>' +
    '<p>Web Designer / Front-End Developer</p>' +

    '<a class="work-url" href="https://www.geniusdivision.com/" target="_blank">Genius Division</a>' +
    '</div>',
    closeOnMapClick: true
  });

  google.maps.event.addListener(marker, 'click', function() {
    info.open(map,marker);
  });
});

https://jsfiddle.net/antonymoss/70vmsatb/12/

Answer 1

将closeWhenOthersOpen: true添加到您所有SnazzyInfoWindows的属性中，就像我在下面所做的那样。

var info = new SnazzyInfoWindow({
  marker: adamDawson,
  content: '<h2>Adam Dawson</h2>' +
    '<p>Freelance Web Designer & Developer</p>' +
    '<a class="work-url" href="http://www.dawsony.com/" target="_blank">Adam Dawson - Web Design & Development</a>',
  closeOnMapClick: true,
  closeWhenOthersOpen: true
});

我发现了snazzy info window docs的财产。

你可以在这个更新的JSFiddle中测试它。