Atrasi-2079-Vox

フリーランスウェブデザイナーArata-Atrasi-Takamiのブログ。服・靴・育児ときどき開発。

Tag Archives: グーグルマップ

GoogleマップがAPI必須になってACFをごにょるの巻

  • 投稿日:2016/08/29

クッソ久しぶりに開発話です。
先日とある法人様のサイト制作を担当したのですが、その時の話を備忘録も兼ねて投稿です。

 

 

今回もWordPressを使ったサイト構築ということで、WordPressサイト制作の強い味方であるプラグイン「Advanced Custom Fields(以下ACF)」を使っておりました。投稿タイプ毎に好きな入力項目を設定できるので、対クライアント様用に分かりやすい入力フォームを作れます。とっても便利。甘えちゃう。ちなみに私が使っているのはデベロッパ向けのPRO版です。

ACF – Advanced Custom Fields

Advanced Custom Fieldsの使い方 / KoToRi Blog

 

このACFの中には簡単にGoogle Mapsを設定できる入力項目を作る機能があります。しかし最近はGoogle Mapsを使う様な案件が無かったこともあって、恥ずかしながらこの機能について半分くらい忘れておりました。今回の法人様の案件で久しぶりにGoogle Mapsを使う場面があったので、設定を進めていたら…。

 

なんすかこれ

gmaperror

 

これは何が起きたのかな…?と思って調べたら、そうでしたそうでした。ちょっと前にこの話してました。今年の6月22日以降に新たに制作されたサイトでGoogle Mapsを利用する場合は、APIキーが必須になったのでした。

Google Mapsを利用する場合はAPIキーが必須になったもようです / ねんでぶろぐ

 

Google Maps API v2からv3に変わるときに不要となったAPIキーが復活し、v3でもキーの取得が必要になりました。APIキーの取得自体は簡単で「Google Maps APIs for Web」にアクセスしてウンタラカンタラするともらえます。

Google Maps の APIキー を簡単に取得する / ねんでぶろぐ

 

 

使用する時は従来のAPI読み込み用のタグに「?key=XXXXXX」という風にして取得したキーをコピペするだけです(XXXXXXの部分にキーを入れます。)。

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX"></script>

もし「?sensor=false」とかオプションの値を渡している場合は、「&」を使って繋げてあげればOKです。

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=XXXXXX"></script>

 

 

 

さて、これでユーザにお見せする方のGoogleマップは正常に表示されるようになりました。

 

が!

 

WordPressの管理画面で、ACFで設定したGoogle Maps設定項目を見ると…

 

HUUuuuuuuuu!!!!

gmapaerror_admin

 

そうですよな。そりゃそうですよな。だってACFにGoogle Maps APIキーを設定するようなとこないもん…。でもプラグインのコアファイルいじって直すのめんどくせーっす。プラグインのアプデの度に書き換わったら超めんどいっす。

 

でもGoogle Mapsの仕様変更から約2ヶ月位経ってる訳ですし、ACF開発元でも何かあるはず!と思って見たら、ちゃんと書いてました。

Google Map / ACF

 

functions.phpに下記のコードを追加して、取得したAPIキーを突っ込みます。

function my_acf_google_map_api( $api ){
  $api['key'] = 'XXXXXX';
  return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

PRO版の場合はこっち。

function my_acf_init() {
  acf_update_setting('google_api_key', 'XXXXXX');
}
add_action('acf/init', 'my_acf_init');

 

いずれも「XXXXXX」の箇所に取得したAPIキーをコピペします。

 

 

これでちゃんと表示できる様になりました。クライアント様も安心です。

googlemap_admin

 

 

 

 

 

 


Google Map経路探索へのリンク

  • 投稿日:2015/08/11

 

 

2013年の頭に「Google Mapにリンクを張る際のパラメータ」という記事を書いたことがあったんですが、あれからずいぶんと時間が経ってGoogle Mapもだいぶ様変わりしました。あの時のパラメータが今でも有効なのかどうか、ちゃんと見返してないんで正直微妙なんですが、まあ気が向いたら検証して記事直しておきます。

 

久しぶりの開発ネタ…ってほどでもないですし今更感あるんですが、ちと紹介。
Google Mapの「経路探索」機能を使ったリンク方法です。

 

以前の記事でも書いた通り、Google MapはURLに様々なパラメータを記述してあげることで、色んな機能を使う事ができます。

 

例えば座標。
https://maps.google.co.jp/maps?ll=35.669029,139.705421
上記の場合は緯度35.669029・経度139.705421の座標を指定した場合です。座標を指定すると、指定された座標を中心としたマップが表示されるわけですね。
指定する場合は上記の様に「ll=緯度,経度」という風に書きます。

 

 

これと同じように「出発地」「目的地」を指定することも出来ます。
出発地は「saddr」、目的地は「daddr」を使います。

 

例えば、出発地を緯度35.669029・経度139.705421のラフォーレ原宿にし、目的地を緯度35.667245・経度139.708796の表参道ヒルズにしてみます。するとURLは
http://maps.google.co.jp/maps?saddr=35.669029,139.705421&daddr=35.667245,139.708796
となります。saddr・daddrそれぞれにll〜の時と同じ要領で座標を記述しています。

 

更に、経路タイプやズーム倍率を指定したりすることも出来ます。
http://maps.google.co.jp/maps?saddr=35.669029,139.705421&daddr=35.667245,139.708796&dirflg=d&z=16
経路タイプは「dirflg」で「t(電車 デフォルト)」「w(徒歩)」「d(車)」が選べます。
ズーム倍率は「z」で0〜約20の数値で指定します(例外もあります)。

 

 

座標の取得は以前の記事でご紹介したサイトが閉鎖されていたようなので、こちらを。
http://www.gis-tool.com/mapview/maptocoordinates.html

 

 

最寄り駅からイベント会場の経路や、最寄りのコインパーキングから店舗への経路を教える時など、何かと使い道がありそうです。