Home Forums Front-end Issues How to get multiple Google Map marker boxes to close when clicking other box


How to get multiple Google Map marker boxes to close when clicking other box

  • I have a multiple marker map working pretty well, with the markers displaying a pop-up with the address info when I click each marker. However, when I click another marker, the already opened marker pop-up boxes don’t close, they only close when I click the X button. So how do I hide an opened pop-up box when I click another? My current code is like so:

    <section id="map">
                <div class="container">
                    <div class="row">
                        $the_query_map = new WP_Query( array( 'post_type' => 'locations', 'posts_per_page' => -1, 'order' => 'ASC', 'orderby' => 'menu_order' ) );
                        if($the_query_map->have_posts()) :
                        $the_ID = get_the_ID();
                        $get_google_map = get_field('google_map', $the_ID);
                        $location_name = get_the_title();
                        $location_address = get_field('office_address', $the_ID);
                        $office_phone = get_field('office_phone', $the_ID);
                        $office_fax = get_field('office_fax', $the_ID);
                        if (empty(get_field('office_fax', $the_ID))) {
                            $output_map[$the_ID]['map'] = '<div class="marker" id="post-'. $the_ID .'" data-lat="'.$get_google_map['lat'].'" data-lng="'.$get_google_map['lng'].'"><p><b>'. $location_name .'</b></p><p>'. $location_address .'</p><p>Tel: '. $office_phone . '</p></div>';
                        } else {
                            $output_map[$the_ID]['map'] = '<div class="marker" data-lat="'.$get_google_map['lat'].'" data-lng="'.$get_google_map['lng'].'"><p><b>'. $location_name .'</b></p><p>'. $location_address .'</p><p>Tel: '. $office_phone . ' <br>Fax: '. $office_fax . '</p></div>';
                        endwhile; endif;
                        <div class="col-md-9">
                            <div class="acf-map"><?php
                            foreach( $output_map as $key => $map_marker ):
                                echo $map_marker['map'];
                        <div class="col-md-3">
                          $args = array (
                              'post_type' => 'locations', // custom post type
                              'orderby' => 'menu_order title', 
                              'order' => 'ASC',
                              'posts_per_page' => -1
                              if (have_posts()) :
                              while (have_posts()) : the_post(); ?>
                            <div class="vertical_align_buttons map_button">
                            <a class="button post-<?php the_ID(); ?>" href="<?php the_permalink();?>"><?php the_title();?></a>
                            <?php endwhile; endif;  wp_reset_postdata();  ?>
                    </div><!-- .row-->
                </div><!-- .container -->

    This is what it currently looks like:

    Ideally, I also would like to hover the buttons on the right and have the respective marker pop-up appear, if you have a suggestion on how to accomplish that! Thanks! Cintia

  • Just to clarify, I’d like it to behave like this:

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.