web-dev-qa-db-ja.com

カスタムフィールドの値をGoogleマップに渡る

私のワードプレスサイトのグーグルマップの表示にこのスクリプトを使用しています。

<head>
    <script>
    function initialize()
    {
      var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };
      var map=new google.maps.Map(document.getElementById("googleMap",mapProp);
    }
    </script>          
</head>

経度と緯度用に2つのカスタムフィールド "fl_long"、 "fl" lat "を設定しましたが、値がハードコードされた数字ではなくカスタムフィールドから取得されるように上記のコードを変更する方法を教えてください。

google.maps.event.addDomListener(window, 'load', initialize);
javascriptgoogle
4
Nikolas Petousis

これは、他の人が提案しているように、wp_localize_script()を使ったバージョンです。 PHPとJSを混在させることはなく、通常はサーバー側からJavaScriptに物を渡すためのきちんとした方法ではありません。

まず、あなたのプラグインかfunctions.phpのどちらかに以下のコードを入れてください（私はプラグインを使っているのでそれに応じて名前を付けましたが、あなたはそれを好きな名前を付けることができます）

function register_plugin_scripts() {

    wp_register_script('my-coordinates-script',
    plugins_url( 'my-plugin/js/using-coordinates-here.js' ),
    'jquery',
    '0.1');

    global $post;
    $fl_lat = get_post_meta($post->ID, 'fl_lat', true); //  "51.508742" or empty string
    $fl_long = get_post_meta($post->ID, 'fl_long', true); // "-0.120850" or empty string

    if( !empty($fl_lat) && !empty($fl_long) ) {
        wp_localize_script('my-coordinates-script', 'my-coordinates', array(
                'lat' => $fl_lat,
                'long' => $fl_long
            )
    }

    wp_enqueue_script( 'my-coordinates-script', plugins_url( 'my-plugin/js/using-coordinates-here.js' ) );

} // end register_plugin_scripts

add_action( 'wp_enqueue_scripts', 'register_plugin_scripts' );


wp_localize_script()の呼び出しは、wp_register_script()の呼び出し（PHPで生成された緯度経度座標を使用するファイルの場合）とwp_enqueue_script()の呼び出しの間に行われる必要があります。これはあなたのページのソースでこのような何かを出力するはずです：

<script type='text/javascript'>
/* <![CDATA[ */
var my-coordinates = {"lat":"51.508742","long":"-0.120850"};
/* ]]> */
</script>
<script type='text/javascript' src='http://yourserver/plugins/my-plugin/js/using-coordinates-here.js?ver=0.1'></script>


そして、あなたのJSファイルの中であなたはあなたの関数にmy-coordinatesオブジェクトを使わせることができます：

function initialize() {
    lat = 0;
    long = 0;
    if (typeof my-coordinates !== 'undefined' && my-coordinates.lat && my-coordinates.long) {
        lat = my-coordinates.lat;
        long = my-coordinates.long;
    }
    var mapProp = {
      center: new google.maps.LatLng(lat, long),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}


コードから何かが明確でない場合は、遠慮なく質問してください。

6
montrealist

ワードプレスフックで頭にスクリプトを追加してみてください。

add_action('wp_head','your_google_head');

function your_google_head(){
    $fl_lat = get_post_meta($your_post_id,'fl_lat',true);//$fl_lat = 51.508742;
    $fl_long = get_post_meta($your_post_id,'fl_long',true);//$fl_long = -0.120850;
    ?>
    <script type="text/javascript">

function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(<?php echo $fl_lat;?>,<?php echo $fl_long;?>),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);
}

    </script>
    <?php 
}
1
Douglas.Sesar