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>