根据地址在wordpress中渲染谷歌地图

时间:2013-08-15 10:03:17

标签: javascript wordpress google-maps

我有一个包含大量页面的wordpress网站,每个页面代表一个物理位置。现在,对于每个页面,我想根据地址显示谷歌地图。 我知道我可以通过安装谷歌地图插件来做到这一点,但这需要我手动,为每个帖子,根据地址创建一个位置,并添加一个短代码到帖子/页面,导致谷歌地图。这个网站有很多工作,有数百个地点。

我希望能够以编程方式为每个帖子创建一个“address-custom-field”。

这就是我现在的位置:

<div id="map_canvas" style="width: 190px; height: 130px; margin-top: 5px;"></div> 
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>

如何将中心:新google.maps.LatLng(-34.397,150.644)更改为地址?

2 个答案:

答案 0 :(得分:0)

您可以编辑这些页面的模板文件,并以与此示例类似的方式嵌入谷歌地图:https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

请注意,最好对所有地址执行一次地理编码,并将坐标保存在每个页面的不同自定义字段中 - 这样您就不需要在每次加载页面时创建地理编码请求。

以下是未经测试的代码,应该与您的需求接近:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<!-- in the body --> 

<div id="map-canvas"></div>

<script>
    (function () {
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var address = <?php echo json_encode(get_post_meta(get_the_id(), 'address-custom-field', true)) ?>" ;

        (new google.maps.Geocoder()).geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    })()
</script>

答案 1 :(得分:0)

我自己处于中间......这绝对不是一件容易的事。它涉及AJAX(WordPress版本)Geo-Data-Store插件,可以对您的帖子和页面以及自定义循环进行地理编码。

无论哪种方式,您都必须为每个帖子添加位置数据。