wordpress上のデータからGoogleMapにアイコンを表示する

まずwordpressにアイコンの位置を示すために、 緯度と経度のデータをCSVファイルから読み込み、wordpressに投稿する必要があリます

無事投稿できたら index.htmlに

   <!-- ajaxのセットアップ-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!--jQuary fileが正確に読み込めれているのかのチェック-->
    <script type="text/javascript">
      $(document).ready(function() {
        alert("jQueryファイルの読み込み完了。");
      });
    <script> var wp_url_admin_ajax = 'http://自分の名前.local/wp-admin/admin-ajax.php'; </script>

    <script>

    jQuery(function($) {
      $.ajax({
        crossDomain: true,
        type: "POST",
        url: wp_url_admin_ajax,
        data: {
          action: "tell_me"
        },

        success: function(response) {
          json = eval("(" + response + ")");
          var markerData = JSON.parse(response);

          for (i = 0; i < markerData.length; i++) {
            create_marker(markerData[i].lat, markerData[i].lng);
          }
          if (json.err) {
            result = "error:404";
          } else {
            console.log(response);
          }
        }
      });
    });
    </script>

wp-adminファイル内にあるadmin-ajax.phpに


header("Access-Control-Allow-Origin: *"); add_action('wp_ajax_tell_me', 'tell_me'); // ログイン状態のユーザーからのアクセスで動作する add_action('wp_ajax_nopriv_tell_me', 'tell_me'); // 非ログインのユーザーからのアクセスで動作する ini_set('display_errors',1); function tell_me() { $data = array(); $count = 0; for($i = 37; $i < 41; $i++){ //記事1~4 $data[$count]['lat'] = get_post_meta($i,'lat',true); $data[$count]['lng'] = get_post_meta($i,'lng',true); $data[$count]['place'] = get_post_meta($i,'place',true); $count++; } echo json_encode($data, JSON_UNESCAPED_UNICODE); die(); }

この際の注意点は add_action(‘wp_ajax_tell_me’, ‘tell_me’); の’tell_me’の部分はその後の関数名と同じにすること。

関数の中でfor文を回す際、 get_post_meta($i,’lat’,true); の$iは各記事のIDなので、 単純に記事4つ分のデータを取りたいからと言って$iを0~4にしてはいけない。

の二点です。(自分が躓いた所)

記事を投稿して削除してを繰り返すと、投稿一覧には記事が4つだけなのに、 IDが飛び飛びになっていたりするので確認が必要です。

ちなみにIDの確認はwordpressの投稿一覧から各記事のタイトルにマウスを乗せることで確認できる。


自分の名前.local/wp-admin/post.php?=

の後の数字になっています。