chihung
2/26/2020 - 8:02 AM

LOOP POST WITH MULTI GOOGLE MAP AND PAGINATION - DONT USE query_posts($args); FIX LATER

 <?php
                    $i = 0;
                    $posts_per_page = 5;
                    $total_posts = $GLOBALS['wp_query']->found_posts;
                    $total_pages = $posts_per_page / $total_posts;
                    $current_page = (get_query_var('paged')) ? get_query_var('paged') : 1;

                    if ( $current_page === 1 ) {
                        // On page 1 start at 1
                        $i = 0;
                    } elseif ( $current_page === 2 ) {
                        // On page 2 start on the post per page + 1
                        $i = $posts_per_page;
                    } else {
                        // On other pages.
                        // For example on page 2 with 5 posts per page we want the counter to start on 6
                        // So page * posts per page - posts on the last page + 1 to get to this page = 6
                        $i = ( $current_page * $posts_per_page - $posts_per_page + 1 );
                    }



                    $args = array(
                        'post_type' => 'post',
                        'posts_per_page' => '5',
                        'paged' => get_query_var( 'paged' ),

                    );
                    query_posts($args);
                    if (have_posts()):


                        ?>
                        <?php while (have_posts()): the_post();
                        $i++
                        ?>



                        <div id="briefing-<?php echo get_the_ID(); ?>" class="list-posts public-flex">
                            <div class="contain-left">
                                <small>

                                    開催日時
                                </small>
                                <?php
                                if (get_post_meta(get_the_ID(), "date_and_time", true)) {
                                    echo get_post_meta(get_the_ID(), "date_and_time", true);
                                } else {
                                    the_time("Y-m-d");
                                }
                                ?>
                            </div>
                            <div class="contain-body">
                                <p>
                                    <span class="label label-pink">
                                        <?php echo get_the_category($id)[0]->name; ?>
                                    </span>
                                </p>

                                <h3><?php the_title(); ?></h3>

                                <?php the_content(); ?>
                                <div class="contain-map-google">


                                    <div id="map<?php echo $i ?>" class="map"></div>








                                </div>
                                <div class="container-btn text-center">
                                    <a href="<?php echo home_url(); ?>/contact" class="btn btn-dark-blue">
                                        問い合わせる
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php endwhile; ?>

                        <div class="text-center">
                            <?php
                            the_posts_pagination();

                            ?>
                        </div>
                    <?php endif; ?>
<script>
                        <?php
                        $i = 1;
                        $map1 = get_field( 'map_google', get_the_ID() );

                        ?>
                        function initMap() {
                            //var image = 'common/img/img-map-pin.png';

                            var center1 = {
                                lat: <?php echo $map1['lat']; ?>,
                                lng: <?php echo $map1['lng']; ?>
                            };

                            if (document.getElementById('map1')) {
                                var map1 = new google.maps.Map(document.getElementById('map1'), {
                                    zoom: 16,
                                    center: center1,
                                });

                                new google.maps.Marker({
                                    position: center1,
                                    map: map1,
                                });

                            }




                            <?php

                            $args = array(
                                'post_type' => 'post',
                                'offset' => 1,

                            );
                            query_posts($args);
                            if (have_posts()):


                            ?>
                            <?php while (have_posts()): the_post();
                            $i++;

                            $map = get_field( 'map_google', get_the_ID() );
                            ?>

                            var center<?php echo $i ?> = {
                                lat: <?php echo $map['lat']; ?>,
                                lng: <?php echo $map['lng']; ?>
                            };



                            if (document.getElementById('map<?php echo $i ?>')) {
                                var map<?php echo $i ?> = new google.maps.Map(document.getElementById('map<?php echo $i ?>'), {
                                    zoom: 13,
                                    center: center<?php echo $i ?>,
                                });

                                new google.maps.Marker({
                                    position: center<?php echo $i ?>,
                                    map: map<?php echo $i ?>,
                                });
                            }


                                <?php endwhile; ?>


                            <?php endif; ?>
                        }
                    </script>

                    <script async defer src="https://maps.googleapis.com/maps/api/js?key=****&callback=initMap"></script>