首先，大家好！我是worpress stackexchange的新手。

我一直在尝试构建自己的谷歌地图，以显示我所有帖子的位置。但我似乎无法在地图上显示这些标记。

编辑：自从我的原始帖子以来，我对代码做了一些更改，现在我返回了数据，但有错误。

这是要返回的数据：

<div style="display: none;">  
 <div id="item1">
     <p><a href="http://localhost:8888/?p=39">Dubai</a></p>
     <p>Testing the plugin even more</p>
 </div>
 <div id="item2">
<p><a href="http://localhost:8888/?p=36">Sydney</a></p>
<p>Still testing the plugin</p>
 </div>
 <div id="item3">
<p><a href="http://localhost:8888/?p=30">Singapore</a></p>
<p>Testing Plugin</p>
 </div>
 <div id="item4">
    <p><a href="http://localhost:8888/?p=7">Abu Dhabi</a></p>
<p>This is a test of the Maps</p>
 </div>
</div>

<script type="text/javascript">
var locations = [
{ 
 latlng : new google.maps.LatLng(25.271139, 55.30748500000004),
 },
{
 latlng : new google.maps.LatLng(-33.8379509, 151.22268610000003),
},
{
 latlng : new google.maps.LatLng(1.3783339, 103.80423819999999),
},
{
 latlng : new google.maps.LatLng(24.4666667, 54.366666699999996),
},
];
</script>

这是地图。js文件：

var infowindow = new google.maps.InfoWindow();
var pinkmarker = new google.maps.MarkerImage(\'/wp-content/themes/travel-bones/library/images/pink_Marker.png\', new google.maps.Size(20, 34) );
var shadow = new google.maps.MarkerImage(\'/wp-content/themes/travel-bones/library/images/shadow.png\', new google.maps.Size(37, 34) );

function initialize() {
    map = new google.maps.Map(document.getElementById(\'map\'), { 
        zoom: 12, 
        center: new google.maps.LatLng(38.898748, -77.037684), 
        navigationControl: false,
            backgroundColor:\'none\',
            streetViewControl: false,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    });

    for (var i = 0; i < locations.length; i++) {  
        var marker = new google.maps.Marker({
            position: locations[i].latlng,
        icon: pinkmarker,
            shadow: shadow,
        map: map
        });
        google.maps.event.addListener(marker, \'click\', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i].info);
        infowindow.open(map, marker);
          }
        })(marker, i));
    }

}

然后这就是我在索引中进行查询的方式。php

<?php if ( have_posts() ) : ?>

            <div style="display: none;">
                <?php $i = 1; ?>
                <?php while ( have_posts() ) : the_post(); ?>
                    <?php if ( get_geocode_latlng($post->ID) !== \'\' ) : ?>
                        <div id="item<?php echo $i; ?>">
                            <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
                            <?php the_content(); ?>
                        </div>
                    <?php endif; ?>
                    <?php $i++; ?>
                <?php endwhile; ?>
            </div>

            <script type="text/javascript">
                var locations = [
                               <?php  $i = 1; while ( have_posts() ) : the_post(); ?>
                                       <?php if ( get_geocode_latlng($post->ID) !== \'\' ) : ?>
                                       {
                                               latlng : new google.maps.LatLng<?php echo get_geocode_latlng($post->ID); ?>,
                                       },
                                       <?php endif; ?>
                               <?php $i++; endwhile; ?>
                               ];
            </script>
            <div id="map" style="width: 100%; height: 100%;"></div>

        <?php else : ?>
            <!-- No matching posts, show an error -->
            <h1>Error 404 &mdash; Page not found.</h1>
        <?php endif; ?>

查询显然在返回结果时起作用。然而，我在地图上看到了这个错误。js文件：

for (var i = 0; i < locations.length; i++) {  
Uncaught TypeError: Cannot read property \'length\' of undefined

查询的内容显示此错误。。。

var locations = [

latlng : new google.maps.LatLng(25.271139, 55.30748500000004),
Uncaught ReferenceError: google is not defined
                                       },

这是我一直遵循的教程。。。修改代码以从地理编码器pulgin中提取lnt/lng数据。http://martyspellerberg.com/2012/02/tutorial-integrating-wordpress-and-google-maps-api-v-3/