Ajax通信によりマップにマーカーを反映させる

オープンデータのcsvファイルを読み込んだwordpressから、Ajax通信によってionicアプリにデータ転送し、アプリ上のgooglemapにマーカーとして表示する方法です。

Access-Control-Allow-Originエラーの回避

まず前回の記事のように、異なるドメイン間の通信を許可させるため、サーバー側のadmin-ajax.php内にAccess-Control-Allow-Originエラーの回避コードを書きます。

/** Allow for cross-domain requests (from the front end). */
send_origin_headers();
//この下に書き加える
header("Content-Type: application/json; charset=utf-8"); //(2)と対応
header("Access-Control-Allow-Origin: *");

サーバー側のコード

次にwordpressのfunctions.phpに以下のコードを書きます。今回、wordpressに載せたデータの投稿idが連番でなかったので、すべてのデータを取得するためにget_postsタグを使いました。

add_action('wp_ajax_tell_me', 'tell_me');  // ログイン状態のユーザーからのアクセスで動作する
add_action('wp_ajax_nopriv_tell_me', 'tell_me'); // 非ログインのユーザーからのアクセスで動作する

function tell_me() {

 $args = array(
    'posts_per_page'   => -1,
    'offset'           => 0,
    'category'         => '',
    'category_name'    => '',
    'orderby'          => 'date',
    'order'            => 'DESC',
    'include'          => '',
    'exclude'          => '',
    'meta_key'         => '',
    'meta_value'       => '',
    'post_type'        => 'post',
    'post_mime_type'   => '',
    'post_parent'      => '',
    'author'       => '',
    'post_status'      => 'publish',
    'suppress_filters' => true
);
 $myposts = get_posts($args);
 $keys = array('店名','緯度','経度'); //これらはカスタムフィールドテンプレート内での表記と一致させる

 $i=0;
  foreach($myposts as $post){
    setup_postdata( $post );
    foreach ($keys as $key){
        $data[$i][(string)$key] = get_post_meta( $post->ID , $key ,true);
  }
  $i++;
 }
 echo json_encode($data, JSON_UNESCAPED_UNICODE);
 die();
}

クライアント側のコード

ionicのindex.htmlに以下のコードを書きます。

<script>
    var data = []  //空の配列"data"を定義
    jQuery(function($) {
      $.ajax({
        type: "POST",
        // dataType:'json',
        crossDomain: true,
        url: wp_url_admin_ajax,
        data: {
          action: "tell_me"
        },
        success: function(response) {
          json = eval("(" + response + ")");
          data = JSON.parse(response);　　
          console.log(data)　//consolにログを取り、データが転送されているか確認する

          var markers = new Array();　
            var opts = {
             zoom: 12,
             center: {lat: 35.010362, lng: 135.768735},
             mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"),opts);
          for (i = 0; i < data.length; i++) {
            data[i].緯度 = parseFloat(data[i].緯度);
            data[i].経度 = parseFloat(data[i].経度);

           var marker_options = {
               map: map,
                position: new google.maps.LatLng(data[i].緯度, data[i].経度),
              };
            markers[i] = new google.maps.Marker(marker_options);　

            function dispInfo(marker,name){google.maps.event.addListener(marker, 'click',
            function(event)
              {new google.maps.InfoWindow({content:name}).open(marker.getMap(),marker);
            });
          }　　//吹き出しを作るため関数dispInfoを宣言

            dispInfo(markers[i],data[i].店名); //dispInfo関数を呼び出し、店名とマーカーの要素を追加


                }

        }
      });
    });
      </script>