Support

Account

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

Helping

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">
                    <?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

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

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

The topic ‘How to get multiple Google Map marker boxes to close when clicking other box’ is closed to new replies.