新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

WordPress

Advanecd Custom Fieldsプラグイン&英語版Googleマップ埋め込みの合わせ技〜APIキー取得&使用〜【WordPress】

2019.3.2

Advanecd Custom Fieldsプラグイン&英語版Googleマップ埋め込みの合わせ技〜APIキー取得&使用〜【WordPress】
WordPress 0 0

こちらの記事は、このような方におすすめです。

・WordPressでホームページ制作をされている方で、英語版のGoogleマップを表示させたい方
・インバウンド向けのホームページ制作をご検討中のコーダーorディレクターの方

妙高Web屋LINE@ 友だち追加

日本国内の地図を、英語表記で表示させることも可能です。

今回の記事は、WordPressのプラグイン「Advanecd Custom Fields」の機能も交えつつ、英語版のGoogleマップを表示させる方法をご紹介します。

この記事の目次

【結論】英語版のGoogleマップを、WordPressのプラグイン「Advanecd Custom Fields」を使って表示させる方法

英語版のGoogleマップを表示させるために、下記の2種類のコードを、それぞれ適した場所に記述してみてください。

まずは「英語版のGoogleマップを読み込みますよ」という宣言のような記述がこちら。

一般的にはheadタグ内に入れれば良い場合が多いですが、ホームページの種類によって個々に異なる場合がありますので、ご自身の責任のもとで設定してみてください。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&v=3.exp&sensor=false&language=en"></script>

さて、次は英語版のGoogleマップを表示させる部分の記述です。

プラグイン「Advanecd Custom Fields」でGoogleマップを表示させるための項目の名称を仮に[eng_gmap]として、このような記述をマップ表示部分に追加してみてください。

<?php $eng_gmap = get_field('eng_gmap'); ?>
<?php if($eng_gmap){ ?>
<script type="text/javascript">
var map;
var marker;
var center = {
lat: <? echo $eng_gmap['lat']; ?>,
lng: <? echo $eng_gmap['lng']; ?>
};
google.maps.event.addDomListener(window, 'load', function() {
/*マップ定義*/
map = new google.maps.Map(document.getElementById('mapArea'), {center:center, zoom:16});
/*マーカー定義*/
marker = new google.maps.Marker({position: center,map: map});
});
</script>
<div class="ggmap" id="mapArea"></div>
<?php } ?>

上記2種類の記述をそれぞれに入れていただくと、プラグイン「Advanecd Custom Fields」を利用した英語版のGoogleマップが表示されるかと思います。

(表示されない場合は、他のスクリプト等の原因も踏まえつつ、ご自身の責任のもと1つずつ調べてみてください。)

ページの先頭へ戻る

[詳細]プラグイン「Advanecd Custom Fields」を絡めた英語版のGoogleマップについて

まず、APIキーを付加したJavascriptの記述は、基本的に場所を選んで貼り付けるのみなので、ここでは省略します。

下記に「Googleマップ APIキー取得」の検索結果へのリンクをご紹介しておきますので、こちらもご自身の責任のもとになりますが、取得して上記コードの「XXXXX」にあたる部分に入れてみてください。

続きまして、英語版Googleマップを表示させたいエリアでの記述についてです。

下記のような分岐のもと、地図上の場所が明確に指定されている場合、地図を表示します。

・カスタムフィールドの項目[eng_gmap]で、地図上の場所が指定されている場合:英語版のGoogleマップとして表示する

・カスタムフィールドの項目[eng_gmap]が空欄:英語版のGoogleマップに相当するエリアそのものが表示されない

Googleマップ上の場所が定まれば、その場所の[lat(緯度)]と[lng(経度)]が1通りに定まります。

その緯度・経度の座標を地図の中心にして、さらには地図上のマーカーの中心としても指定することで、指定した場所を中心とする英語版のGoogleマップが表示されるはずです。

ここは、日本語版でも同様かと思います(^^)

地図の拡大率も指定できます。

こちらの[zoom:XX]の値を調整してみてください。

よく見かけるのは「13」から「16」くらいですが、状況に応じてお好みで選んでください。

/*マップ定義*/
map = new google.maps.Map(document.getElementById('mapArea'), {center:center, zoom:16});

また、上記の[…getElementById(‘mapArea’)…]で指定している名称と同じid名のタグの場所に、英語版のGoogleマップが表示されます。

こちらの例では、下記のdivタグがそれに該当します。

<div class="ggmap" id="mapArea"></div>

いかがでしょうか?

近年では「インバウンド」と呼ばれて、海外からお越しの旅行者の方が日本の観光を楽しまれている機会も多いようですので、英語版のGoogleマップの表示は、これからもニーズがありそうですね(^^)

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する

お見積もりのご依頼はお気軽にどうぞ

妙高Web屋では、ホームページの制作やチラシなどの広告物の制作をご検討中の方へ向けて、お見積もりのご依頼も承っております。ご質問なども含めまして、お気軽にお申し込みください。

お見積もりを依頼する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ