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

• SkunkworksCanada

• May 20, 2017 at 7:25 am

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">
                <?php 
                    $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()) :
                    while($the_query_map->have_posts()):
                    $the_query_map->the_post();
                    $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);
                    ?>

                    <?php 
                    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>';
                    }
                    ?>

                    <?php 
                    endwhile; endif;
                    wp_reset_postdata();

                    ?>
                    <div class="col-md-9">
                        <div class="acf-map"><?php
                        foreach( $output_map as $key => $map_marker ):
                            echo $map_marker['map'];
                            endforeach;
                            ?>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <?php 
                      $args = array (
                          'post_type' => 'locations', // custom post type
                          'orderby' => 'menu_order title', 
                          'order' => 'ASC',
                          'posts_per_page' => -1
                          );
                          query_posts($args);
                          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>
                        </div>

                        <?php endwhile; endif;  wp_reset_postdata();  ?>
                    </div>
                </div><!-- .row-->
            </div><!-- .container -->
        </section>

This is what it currently looks like:
http://cdn.skunkworks.ca.s3.amazonaws.com/temp-screenshots/multiple_markers.jpg

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

• SkunkworksCanada

• May 20, 2017 at 7:27 am

Just to clarify, I’d like it to behave like this:
http://econym.org.uk/gmap/example_maptips.htm