0

メタデータを使用して郵便番号を取得しようとしているので、次のようになります。

$property->add_meta_box( 
    'Property Info', 
    array(
        array(
              'name'        => 'postcode',
              'label'       => 'Postcode',
              'type'        => 'text',
        );
     )
);

すべての投稿タイプ - プロパティにメタ ボックスを作成します。プロパティに郵便番号がある場合、この郵便番号を使用して Google マップをページ上で動的に生成するにはどうすればよいですか?

4

1 に答える 1

1

私がどのようにそれをしたかを示しますが、これは1年前であり、Googleマップ/ジオコーディングの更新に基づいて、おそらくより更新された最新の回答があります。ジオコーディングは、郵便番号を緯度/経度に変換するプロセスの用語です。このコードは、single.php個々の投稿に地図を表示するために使用していたので、すべて私の中にありました。設定方法に応じて、さまざまな操作を行うことができます。

私はもともとYahooMapsAPIを使用して郵便番号をジオコーディングし、次にGoogleMapのジオコーディングがひどく不正確だったため地図にGoogleMapsを使用していました。Yahooはサービスをオフにしたので、Googleマップよりも正確なジオコーディングのGoogleローカル検索バージョンに変更しました（これは昨年、2011年でした）。

すべてのファーは、スクリプトをマップAPIに含めるようにしてください。<head>

https://developers.google.com/maps/documentation/javascript/tutorial#api_key

と

<body onload="initialize()" onunload="GUnload()">

テンプレートでは、次のようなカスタムオプションにアクセスします（IDがpostcode）であると想定します。

<?php $postcode = get_post_meta($post->ID, 'postcode', true); ?>

次に、次のJavscriptを使用して住所をジオコーディングし、マップを生成します（で#map_canvas）。

これがJSです。

<script type="text/javascript">
var localSearch;
var map;
var icon;
var addressMarkerOptions;
google.load("search", "1");
google.load("maps", "2");
google.setOnLoadCallback(initialize);

function initialize()
{

    localSearch = new GlocalSearch();
    icon = new GIcon(G_DEFAULT_ICON);
    addressMarkerOptions = { icon:icon , draggable: false};

    map = new GMap2(document.getElementById("map_canvas"));
    map.addControl(new GSmallZoomControl3D ());
    var mapControl = new GMapTypeControl();
    plotAddress("<?php echo $postcode ?>");

}

/**
* This takes either a postcode or an address string
*
*/
function plotAddress(address)
{
  localSearch.setSearchCompleteCallback(null, 
function() {

  if (localSearch.results[0])
     {     
    var resultLat = localSearch.results[0].lat;
    var resultLng = localSearch.results[0].lng;
    var point = new GLatLng(resultLat,resultLng);
    var marker = new GMarker(point, addressMarkerOptions);
    map.setCenter(point, 15, G_HYBRID_MAP);
   }
});

localSearch.execute(address + ", UK");
}
</script>

HTMLは次のとおりです。

<div id="streetview">
    <div id="map_canvas" style="width: 250px; height: 250px"></div>
</div>
于 2012-10-06T13:18:05.850 に答える