Question

我正在尝试使用名为“latlng”的自定义字段在Google地图上显示Wordpress自定义帖子“位置”，其中包含地图合作。我在这里找到了如何执行此操作的说明：

http://pointatthemoon.co.uk/2013/02/creating-a-clickable-google-map-of-blog-posts-using-wp_query-in-wordpress/

不幸的是，由于我不知道的原因，我的地图根本没有显示。我将在下面发布我的代码，我已经尝试适应我的情况，但我对PHP和Javascript的理解非常有限。我打开了萤火虫，但没有看到任何错误。地图所在的页面位于：

http://pbcecology.thelongmoment.com/directory/

我的map-page.php：

<?php

    $args = array(
    'post_type' => 'location', // or define custom post type here
    'meta_key' => latlng // whatever key you have given your custom meta
    );

    $map_page = new WP_Query($args);

    if( $map_page->have_posts() ) : ?>

    <div style="display: none;">

        <?php $i = 1;

         while ( $map_page->have_posts() ) : $map_page->the_post();

         // just test to see if there is a lat value - if so carry on
          if ( get_post_meta($post->ID,  latlng, true) !== '' ) : ?>

        <div id="item<?php echo $i; ?>"

        // pull in your post thumbnail
        <?php get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'thumbnail' ) ); ?>

        // pull in your post permalink
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

        // in fact pull in any other data from your post that you might want to use ;)

        </div>

        <?php endif; ?>

        <?php $i++;    ?>

    <?php endwhile; ?>

    </div>
<div id="map-canvas" style="width:100%; height:600px;"></div> 
    <script type="text/javascript">

    var locations = [

        <?php  $i = 1; while( $map_page->have_posts() ) : $map_page->the_post();

        // pull out our lattitude and longitude values and concatenate to use in Google maps
        if ( get_post_meta($post->ID,  latlng, true) !== '' ) :

        $latlong = get_post_meta($post->ID,  latlng, true);


        $latlng = "$latlng";

        ?>
        {
        latlng : new google.maps.LatLng<?php echo $latlng; ?>,
        info : document.getElementById('item<?php echo $i; ?>')
        },

        <?php endif; ?>

        <?php $i++; endwhile; ?>
    ];

    </script>



    <?php

else :

endif; ?>

我的map.js：

var infowindow = new google.maps.InfoWindow();



function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(54.072283,-125.093995),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    });

                var markers = [];
            for (var i = 0; i < locations.length; i++) {  

                var marker = new google.maps.Marker({
                    position: locations[i].latlng,
                    map: map
                });

                        markers.push(marker);

                google.maps.event.addListener(marker, 'click', (function(marker, i) {

                    return function() {
                        infowindow.setContent(locations[i].info);
                        infowindow.open(map, marker);
                      }

                })(marker, i));

        }

    // the following var sets up varying sized icons to be used at different zoom levels with markerClusterer
    // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

    var styles = [{
        url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
        height: 50,
        width: 50
    }, {
        url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png',
        height: 60,
        width: 60
    }, {
        url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png',
        height: 75,
        width: 75
    }];

    var mcOptions = {gridSize: 40, maxZoom: 15, styles: styles};

    var markerCluster = new MarkerClusterer(map, markers, mcOptions);

}

根据说明书，我还有一个markerclusterer.js，我不会发布代码（除非有要求，但我是从Google Maps Utility Library获得的）。

非常感谢您提供的任何见解！

在Google地图上显示Wordpress自定义帖子类型

0 个答案: