ApiキーをWordPressに登録
実際のプラグインのコードの説明に入ります。
まず作成したApiキーをwp_enqueue_scriptを使ってWordPressに登録します。
「your api key」の部分をあなたのApiキーに書き換えて下さい。
1 2 3 4 5 6 7 8 |
/** 1.ワードプレスにApiキーを登録する * */ function add_scripts() { wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=your api key'); } add_action('wp_enqueue_scripts', 'add_scripts'); |
ジオコーディングのメソッド実装
マップを表示するために住所から地理的座標(たとえば、緯度35.6604282、経度 139.7269877)に変換する必要があるため、住所から地理的座標に変換するためのメソッドを実装します。ジオコーディングとは住所から地理的座標に変換するプロセスです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/** 2.住所をジオコーディングする * */ function bit_gmap_get_coordinates($address, $force_refresh = false) { $address_hash = md5($address); $coordinates = get_transient($address_hash); if ($force_refresh || $coordinates === false) { //geocode用アドレスの生成 $args = array('address' => urlencode($address)); $url = add_query_arg($args, 'http://maps.googleapis.com/maps/api/geocode/json'); //geocodeデータを取得 $response = wp_remote_get($url); if (is_wp_error($response)) return; //取得したgeocodeデータからbodyの配列を抜き出す $data = wp_remote_retrieve_body($response); if (is_wp_error($data)) return; if ($response['response']['code'] == 200) { //jsonデータをphpで読めるようにデコードする $data = json_decode($data); if ($data->status === 'OK') { //必要なデータを$cache_value配列に挿入。 $coordinates = $data->results[0]->geometry->location; $cache_value['lat'] = $coordinates->lat; $cache_value['lng'] = $coordinates->lng; $cache_value['address'] = (string) $data->results[0]->formatted_address; // cache coordinates for 3 months 抜き出したデータを3ヶ月間キャッシュします。 set_transient($address_hash, $cache_value, 3600 * 24 * 30 * 3); $data = $cache_value; } else { return __('Something went wrong while retrieving your map, please ensure you have entered the short code correctly.', 'simple-google-maps-short-code'); } } else { return __('Unable to contact Google API service.', 'simple-google-maps-short-code'); } } else { $data = $coordinates; } // キャッシュデータを返す return $data; } |
上記のコードの簡単な説明に入ります。
・geocode用アドレスを生成します。
googleのジオコード用のアドレスに表示したいマップの住所をクエリー文字列としてadd_query_arg()で付加します。
・geocodeデータの取得。
生成したアドレスへwp_remote_get()を使ってデータを取得しに行きます。
住所がなければerrorが返ります。
1 2 3 4 5 |
{ "error_message" : "Invalid request. Missing the 'address', 'bounds', 'components', 'latlng' or 'place_id' parameter.", "results" : [], "status" : "INVALID_REQUEST" } |
実際に得られるデーターはこんな感じです。
array (size=6) ‘headers’ => object(Requests_Utility_CaseInsensitiveDictionary)[2930] protected ‘data’ => array (size=11) ‘content-type’ => string ‘application/json; charset=UTF-8’ (length=31) ‘date’ => string ‘Sat, 06 May 2017 03:33:51 GMT’ (length=29) ‘expires’ => string ‘Sun, 07 May 2017 03:33:51 GMT’ (length=29) ‘cache-control’ => string ‘public, max-age=86400’ (length=21) ‘vary’ => string ‘Accept-Language’ (length=15) ‘access-control-allow-origin’ => string ‘*’ (length=1) ‘content-encoding’ => string ‘gzip’ (length=4) ‘server’ => string ‘mafe’ (length=4) ‘content-length’ => string ‘498’ (length=3) ‘x-xss-protection’ => string ‘1; mode=block’ (length=13) ‘x-frame-options’ => string ‘SAMEORIGIN’ (length=10) ‘body’ => string ‘{ “results” : [ { “address_components” : [ { “long_name” : “3 Chome”, “short_name” : “3 Chome”, “types” : [ “political”, “sublocality”, “sublocality_level_2” ] }, { “long_name” : “Kataseyama”, “short_name” : “Kataseyama”, “types” : [ “political”, “sublocality”, “sublocality_level_1” ] }, { “long_name” : “Fujisawa-shi”, ‘… (length=2159) ‘response’ => array (size=2) ‘code’ => int 200
・取得したgeocodeデータからbodyの配列のみを抜き出す。
上で得られたデータのbody部分(jsonデータ)が必要なのでそれをwp_remote_retrieve_body()を使って抜き出します。
・jsonデータをphpで読めるようにデコードする。
json_decode()でPHP の変数に変換します。
・必要なデータを$cache_value配列に挿入。
変換したデータの中から必要なものだけ、$cache_value配列に移しかえる。
・抜き出したデータをキャッシュします。
set_transient()を使って必要なデータをワードプレスのデータベースに保存します。これをしておかないと、Google Maps Geocoding API の使用制限にかかります。
・キャッシュデータを返します。
以上がジオコーディングメソッドの流れになります。
すてにキャッシュが存在すればget_transient()でキャッシュを取得します。