jcadima
11/30/2016 - 4:07 PM

google maps tabs wit locations

google maps tabs wit locations

Header:

<link rel='stylesheet' id='octametro-jquery-ui-css'  href='http://www.octametro.com/wp-content/themes/octametro/js/jquery-ui-1.11.4.custom/jquery-ui.css?ver=4.6.1' type='text/css' media='' />

<script type="text/javascript" src="http://www.octametro.com/wp-content/themes/octametro/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>



1) get maps locations such as:

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3939.867472563942!2d-79.39854642912745!3d9.07583609650334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x464c70fa2958cab6!2sOfidepositos+Tocumen+II!5e0!3m2!1sen!2sus!4v1455289061006

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3939.867472563942!2d-79.39854642912745!3d9.07583609650334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x464c70fa2958cab6!2sOfidepositos+Tocumen+II!5e0!3m2!1sen!2sus!4v1455289061006

2) create custom post type for these locations 
make sure it has at least these two fields:
Country info
google maps field for the google embed:
https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3939.867472563942!2d-79.39854642912745!3d9.07583609650334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x464c70fa2958cab6!2sOfidepositos+Tocumen+II!5e0!3m2!1sen!2sus!4v1455289061006


fill with info such as:

Panamá
Avenida Domingo Díaz, Galeras
Ofidepositos Tocumen II Galera 10-A
(entrada del INADEH), Ciudad de Panamá.
Telephone: (507) 292 1039 - 1048 - 1050


3) 
<!-- Inicio Our location -->
<article id="ourLocation" class="tabLocations">
    <h3><?php echo __('Our locations', 'octametro'); ?></h3>
    <div id="tabsLocation" class="wrapper">
        <ul>
            <?php
            // here you need to get the custom post type values
            $postsLot = new WP_Query(array('cat' => pll_get_term(21), 'orderby' => 'date', 'order' => 'ASC', 'posts_per_page' => '-1'));
            $i = 1;
            while ($postsLot->have_posts()) : $postsLot->the_post();
                ?> 
                <li>

                    <a href="#tabs-<?php echo $i; ?>" class="btnLoc <?php
                       global $post;
                       echo $post->post_name;
                       ?>">
                <?php the_content(); ?>
                    </a>
                </li>                    
                <?php
                $i ++;
            endwhile;

            wp_reset_query();
            ?>   

        </ul>

        <?php
        $postsLot = new WP_Query(array('cat' => pll_get_term(21), 'orderby' => 'date', 'order' => 'ASC', 'posts_per_page' => '-1'));
        $i = 1;
        while ($postsLot->have_posts()) : $postsLot->the_post();
            ?>                 
            <div id="tabs-<?php echo $i; ?>">
                <div class="locationMaps">
<?php $map = get_post_meta(get_the_ID(), 'meta-box-locations-map', true); ?>
                    <iframe src="<?php echo $map; ?>" width="590" height="578" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>
            </div>
            <?php
            $i ++;
        endwhile;
        wp_reset_query();
        ?>    


    </div>
    <div class="clearfix"></div>
</article><!-- Fin Our location -->