0

I'm looping through some code to show map markers and popups when they're clicked. At the moment when you click a marker, it shows the popup with some info. If you click another marker it shows that popup but the first marker popup still remains.

How can I set it so if you click another marker, it hides all other popups?

Here's my jquery:

$(".feature").click(function(e) {
    e.preventDefault();
    var item = $(this).data('number');
    $('.map-popup[data-number="' + item + '"]').show();
    $('.map-down-arrow[data-number="' + item + '"]').show();
    var title = $('.map-popup-title[data-number="' + item + '"]').text();
    $('#input_2_5').find('option[value="' + title + '"]').attr('selected', true);
});

Here's my code:

<div class="map-popup" data-number="<?php echo $count; ?>" style="left:<?php echo $coords[0]; ?>;top:<?php echo $coords[1]; ?>;">
    <span class="map-popup-title" data-number="<?php echo $count; ?>"><?php echo $title; ?><br /></span>
    <span class="map-popup-text"><?php echo $desc; ?><br /></span>
    <span class="map-popup-text map-popup-tel"><?php echo $tel; ?><br /></span>
    <span class="map-popup-text map-popup-email"><?php echo $email; ?></span>
</div>
<a href="#" class="feature" data-number="<?php echo $count; ?>" style="left:<?php echo $coords[0]; ?>;top:<?php echo $coords[1]; ?>;" data-title="<?php echo $title; ?>" data-info="<?php echo $desc; ?>">
    <span class="map-down-arrow" data-number="<?php echo $count; ?>">&#9660;</span>
</a>
Rob
  • 6,304
  • 24
  • 83
  • 189

2 Answers2

1

You can hide all popup first and then make specific popup visible, see below code

$(".feature").click(function(e) {
    e.preventDefault();
    //hide all other popup first
    $('.map-popup').hide();
    $('.map-down-arrow').hide();

    var item = $(this).data('number');
    $('.map-popup[data-number="' + item + '"]').show();
    $('.map-down-arrow[data-number="' + item + '"]').show();
    var title = $('.map-popup-title[data-number="' + item + '"]').text();
    $('#input_2_5').find('option[value="' + title + '"]').attr('selected', true);
});
Bhushan Kawadkar
  • 28,279
  • 5
  • 35
  • 57
1

Is there any reason you just dont hide all the other popups?

$(".feature").click(function(e) {
  e.preventDefault();

  $('.map-popup[data-number], .map-down-arrow[data-number]').hide();

  var item = $(this).data('number');
  $('.map-popup[data-number="' + item + '"]').show();
  $('.map-down-arrow[data-number="' + item + '"]').show();
  var title = $('.map-popup-title[data-number="' + item + '"]').text();
  $('#input_2_5').find('option[value="' + title + '"]').attr('selected', true);
});
Alex
  • 9,911
  • 5
  • 33
  • 52
  • Yes... I didn't think to do it, ha! I forgot to add to the question, is it possible when clicking out of the marker or popup (there's links in the popup) that it hides the popup? – Rob Aug 10 '18 at 10:27
  • sure https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element/3028037#3028037 – Alex Aug 10 '18 at 10:33