WordPress цикл и несколько карт Google, получая ошибки в консоли

Question

Я пытаюсь создать слайд-бокс с 4 локализациями, показанными на картах.Каждая локализация на одной карте.

Я создал пользовательский тип сообщения с пользовательскими полями сообщений lat и lng.Я получаю настраиваемые поля сообщения через

<?php
      $args = array(
        'post_type'=> 'localisations',
        'posts_per_page' => 4,
        'orderby' => 'date',
        'order' => 'DESC',
      );
      query_posts($args);

            if ( have_posts() ) :
            while ( have_posts() ) : the_post();
            $meta = get_post_meta( $post->ID, 'real_estate_location_details', true );
          ?>

. На следующем шаге я добавляю в div.mapholder идентификатор с шагом, используя jQuery

  jQuery(function($){
   var i=0;
    $('.mapholder').each(function(){
     i++;
     var newID='map'+i;
     $(this).attr('id',newID);
     $(this).val(i);
    });
  });

  <div id="map-container">
      <div class="mapholder"></div>
  </div><!-- #map-container -->

, и в конце яПри создании карты

function initialize() {
          var latVariable = "<?php echo $meta['lat']; ?>";
          var lngVariable = "<?php echo $meta['lng']; ?>";
          var mapOptions = {
            center: {lat: latVariable, lng: lngVariable},
            zoom: 5
          }

          var map = new google.maps.Map(document.getElementById('map'+i), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

консоль выводит некоторые ошибки:

• `Вы включили JavaScript API Карт Google на этой странице несколько раз.Это может привести к непредвиденным ошибкам. - Я думаю, это потому, что приращение в var map new google.maps.Map (document.getElementById ('map' + i), mapOptions); `не работает, но я незнать, как это исправить.
• Uncaught SyntaxError: Неожиданный токен new - Получил этот.Мне не хватало `=` между картой и новым

Не могли бы вы помочь мне с этим?

Answer 1

У вас есть проблемы, потому что вы добавляете скрипты Google Api в цикл - вот почему они загружаются так много раз, и у вас отображается ошибка.

Было бы трудно представить вамрабочий пример без возможности его реального запуска, поэтому, пожалуйста, не рассматривайте его как окончательное рабочее решение, а скорее как направление.

Прежде всего вам не нужен этот скрипт, который создает идентификаторы, так как он этого не делаетпомочь в вашем сценарии, и это легко сделать во время выполнения цикла PHP.

Вторым шагом будет изменение способа вызова обратного вызова при загрузке окна.Определяя функцию в цикле, вы фактически каждый раз переопределяете ее.

В-третьих, нужно извлечь скрипт API Google вне цикла.

Пожалуйста, найдите код в этом файле.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5rsZHHAmzP_pOuHGKEUtarn2QideIyUM"></script>
<div id="real-estate-box" class="slideout">
    <div class="real-estate-box-wrapper">
        <p class="real-estate-box-title">For sale</p>
    </div>
    <div class="slideout-inner">
        <?php
            $args = array(
                'post_type'=> 'real-estete',
                'posts_per_page' => 4,
                'orderby' => 'date',
                'order' => 'DESC',
            );
            query_posts($args);

        ?>
        <div class="see-all-real-estate col-xl-12">
            <?php echo '<a href="' . get_bloginfo('url') .'/realestate">see all</a>';   ?>
        </div>
        <ul>
            <?php
                $map_id = 1;
                if ( have_posts() ) :
                while ( have_posts() ) : the_post();
                    $meta = get_post_meta( $post->ID, 'real_estate_location_details', true );
                    ?>
                    <script type="text/javascript">
                        google.maps.event.addDomListener(window, 'load', function() {
                            var map new google.maps.Map(document.getElementById('map-<?= $map_id ;?>'), {
                                center: {
                                    lat: "<?= $meta['lat']; ?>",
                                    lng: "<?= $meta['lng']; ?>"
                                },
                                zoom: 5
                            });
                        });
                    </script>
                    <li class="col-xl-3">
                        <a class="real-estate-title" href="<?php the_permalink() ?>">
                            <?php the_title(); ?>
                        </a><!-- .real-estate-title -->
                        <div id="map-container">
                            <div class="mapholder" id="map-<?= $map_id ;?>"></div>
                        </div><!-- #map-container -->
                        <a href="<?php the_permalink() ?>" class="real-estate-btn">see more</a>
                    </li><!-- .col-xl-4 -->
                    <?php
                    $map_id++;
                endwhile; ?>
        </ul>
    <?php
        else:
            echo '<p class="no-real-estete">We don\'t have any real estates for sale on the moment</p>';
        endif;
    ?>
    </div>

</div>    

https://pastebin.com/5Tz9Ueaa

На самом деле, я настоятельно рекомендую перейти с вашим кодом в совершенно ином направлении, поскольку у вас возникнут некоторые проблемы с этим подходом.Тем не менее кодовая форма pastebin должна работать в вашем случае.