WordPressのデータベース上の位置情報をGoogleMapにプロットする

WordPressのデータベースに保存された位置情報を、Ajaxを利用してGoogleMapにプロットしていきます。

まずWordpressに記入するコードです

“wordpress/wp-content/themes/******/functions.php”

// ひとつの位置情報をプロットする時
add_action('wp_ajax_tell_me', 'tell_me');
add_action('wp_ajax_nopriv_tell_me', 'tell_me');
function tell_me() {
    $id = 220; //任意の投稿ID
    $res[0] = get_post_meta($id,'latitude',true);
    $res[1] = get_post_meta($id,'longitude',true);
    $res[2] = get_post_meta($id,'name',true);
    $res[3] = get_post_meta($id,'address',true);
    echo json_encode($res, JSON_UNESCAPED_UNICODE);
    die();
}

次に今回はIonicで作成中の地図アプリ上に表示したいので”index.html”に以下を記入します。

“src/index.html”

<!-- ブラウザ側の処理
  WordPressにAjax通信のリクエストを投げる-->
 <!-- jQueryのCDNを使ったjQueryファイルの読み込み -->
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script> var wp_url_admin_ajax = 'http://*******/wp-admin/admin-ajax.php'; </script>
 <script>
  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との通信によって得られた値を送っている。
            }
        });
    });

    function mark(data){
      //表示するマップの設定
      //地図の中心は東京駅の設定
      var myLatlng = new google.maps.LatLng('35.681382', '139.766084');//座標は東京駅
      var opts = {
        zoom: 13,  //地図のスケールの大きさ
        center: myLatlng,  //地図の中心地
        mapTypeId: google.maps.MapTypeId.ROADMAP　　//ロードマップ
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),opts);

      //データベースの位置情報のうち一つをプロット
      var markers = new google.maps.Marker({
      position: new google.maps.LatLng(data[0], data[1]),
      map: map
    });
    dispInfo(markers,data[2]);
}

しかし、これではデータベース上の一つの位置情報しかできないので、全ての位置情報を表示する方法を今後考えたい。

AjaxをWordpressで使うにあたってこちらのサイトがとてもわかりやすく参考にさせていただいた : wordpressで使ってみるajaxの基本

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