根据地址自定义字段在wordpress中渲染谷歌地图

win*_*nas 2 javascript wordpress google-maps

我有一个带有大量页面的wordpress网站,每个页面代表一个物理位置.现在,对于每个页面,我想根据地址显示谷歌地图.我知道我可以通过安装例如Geo Mashup插件http://wordpress.org/extend/plugins/geo-mashup/来做到这一点,但这需要(我相信)我手动地为每个帖子创建一个基于的位置地址并添加一个短代码到帖子/页面,导致谷歌地图.这个网站有很多工作,有数百个地点.

我希望能够

答:以编程方式为每个帖子创建"地址 - 自定义字段".
B:在页面模板中使用该自定义字段来呈现谷歌地图.

A很容易,但B?

Dan*_*llo 6

您可以考虑使用Google Maps API.

以下示例可帮助您入门.您需要做的就是yourAddress使用页面中位置功能的地址更改JavaScript变量."如果A很容易",那应该是非常直截了当的.

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var yourAddress = 'London, UK';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(yourAddress, function (locations) {         
          if (locations.Placemark)
          {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
          }
       });
    }
    </script> 
  </body> 
</html>
Run Code Online (Sandbox Code Playgroud)

上面的示例将呈现如下所示的地图:

在wordpress中渲染谷歌地图,基于地址自定义字段http://img716.imageshack.us/img716/7267/london.jpg

如果Google客户端地理编码器无法从地址中检索坐标,则地图不会显示.