Ajax通信でWordPressのデータベースから座標データを取得し、ionicのスマホアプリに位置情報をマークする方法

サーバ(wordpress)側のコード。

wordpressのfunctions.php(参照パス:vccs/wordpress/wp-includes/functions.php)に以下のコードを加える。

add_action('wp_ajax_tell_me', 'tell_me');  
add_action('wp_ajax_nopriv_tell_me', 'tell_me'); 
function tell_me() {
    $id = ---; //任意の投稿ID 
    $res[0] = get_the_title($id);
    $res[1] = get_post_meta($id,'latitude',true);
    $res[2] = get_post_meta($id,'longitude',true);
    echo json_encode($res, JSON_UNESCAPED_UNICODE);
    die();
}

またクロスドメイン設定で加えたコード ”header(“Access-Control-Allow-Origin: *”);”は、functions.phpに書き込んでいるとAccess-Control-Allow-Originエラーになったので、admin-ajax.php(参照パス:vccs/wordpress/wp-admin/admin-ajax.php)に移した。

/** 〜抜粋〜  */
/** Load WordPress Bootstrap */
require_once( dirname( dirname( __FILE__ ) ) . '/wp-load.php' );

/** Allow for cross-domain requests (from the front end). */
send_origin_headers();
header("Access-Control-Allow-Origin: *"); //追加

// Require an action parameter
if ( empty( $_REQUEST['action'] ) )
    wp_die( '0', 400 );

クライアント(ionic)側のコード。

ionicのindex.html(参照パス:smartphoneApp/src/index.html)に以下のコードを加える。

<script>
    var wp_url_admin_ajax = 'http://aoi.local/wp-admin/admin-ajax.php';
    jQuery(function ($){
        $.ajax({
            type: 'POST',
            dataType: 'json',
            crossDomain: true,
            url: wp_url_admin_ajax,
            data: {
                action : 'tell_me'
            },
            success: function(response){
                mark(response); //ここで外部に記述している関数mark(引数:座標データ)にwordpressとの通信によって得られた値を送っている。
            }
        });
    });
</script>

また外部に記述したmarkという関数からGoogleMapにマーカーを追加する動作を実行する。

function mark(data){
    var markers = new google.maps.Marker({
    position: new google.maps.LatLng(data[1], data[2]),
    map: map
    });
    dispInfo(markers,data[0]);
}

これでGoogleMapにマーカーが追加される。