将PHP集成到Javascript中，使用Google API显示地图标记

我要显示一个地图标记，但不能显示多个标记。

但是，数据显示在HTML日志中。我认为我错过了一个循环或没有正确使用当前循环。

任何能澄清的人都会让我高兴。

谢谢。

以下是代码：

<?php get_header(); ?>
<!-- Row for main content area -->
<div class="small-12 large-12 columns" id="content" role="main">
    <h1 class="entry-title">Find a store</h1>
    <script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            setMarkers(map);
        }
        ;
    </script>
    <div id="map"></div>
    <?php
    $args = array('post_type' => 'store', array("output" => "raw"), 'posts_per_page' => 50,);
    $loop = new WP_Query($args);
    while ($loop->have_posts()) : $loop->the_post();
        ?>
        <?php $lat = types_render_field("lat", array("output" => "raw")); ?>
        <?php $long = types_render_field("long", array("output" => "raw")); ?>
        <script type="text/javascript">
            var lat = <?php echo $lat; ?>;
            var long = <?php echo $long; ?>;
            var locations = [
                ['<?php the_title(); ?>', lat, long]
            ];
            function setMarkers(map) {
                for (var i = 0; i < locations.length; i++) {
                    var location = locations[i];
                    var marker = new google.maps.Marker({
                        position: {lat: location[1], lng: location[2]},
                        map: map,
                        title: location[0],
                    });
                }
            }
        </script>
    <?php endwhile; // End the loop ?>
    <script src="https://maps.googleapis.com/maps/api/..." async defer></script>
</div>
<?php get_footer(); ?>

这是控制台日志中的输出脚本：

<script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            setMarkers(map);
        }
        ;
</script>
<div id="map"></div>
<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -25.746111, lng: 28.188056}),
            map: map,
            title: 'Willow Way Spar'
        });
    }
</script>
<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -29.919885, lng: 30.941782}),
            map: map,
            title: 'Yellowwood park Superspar'
        });
    }
</script>
<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -26.8598225, lng: 26.6317514}),
            map: map,
            title: 'Zest for Health'
        });
    }
</script>
<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -25.8299422, lng: 28.2819103}),
            map: map,
            title: 'Zest Wellness Centre'
        });
    }
</script>

<script src="https://maps.googleapis.com/maps/api/..." async defer></script>
</div>

我用这个代码得到了相同的结果：

<?php get_header(); ?>
<!-- Row for main content area -->
<div class="small-12 large-12 columns" id="content" role="main">
    <h1 class="entry-title">Find a store</h1>
    <script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            setMarkers(map);
        }
        ;
    </script>
    <div id="map"></div>
    <?php
    $args = array('post_type' => 'store', array("output" => "raw"), 'posts_per_page' => 50,);
    $loop = new WP_Query($args);
    while ($loop->have_posts()) : $loop->the_post();
        ?>
        <?php $lat = types_render_field("lat", array("output" => "raw")); ?>
        <?php $long = types_render_field("long", array("output" => "raw")); ?>
        <script type="text/javascript">
            var lat = <?php echo $lat; ?>;
            var long = <?php echo $long; ?>;
        </script>
        <script>
            function setMarkers(map) {
                var marker = new google.maps.Marker({
                    position: {lat: lat, lng: long},
                    map: map,
                    title: '<?php the_title(); ?>',
                });
            }
        </script>
        <?php wp_reset_postdata(); ?>
    <?php endwhile; // End the loop ?>
    <script src="https://maps.googleapis.com/maps/api/..." async defer></script>
</div>
<?php get_footer(); ?>

这里有一个测试页面的链接：

http://www.golonutrition.co.za/find-a-store/