HPに簡単に作成できる！Google mapを埋め込む方法5つ

※本ページにはプロモーション(広告)が含まれています

Google mapをホームページに埋め込んでみよう！（タグ利用・応用編）

次は距離を測ったりちょっと高度な設定です。

マイマップを開く

まずはGoogle mapのマイマップを開きます。

次に次のようなJavaScriptを書きます。

 

body { margin: 0; line-height: 1.6; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }

function initMap() {
var latlng = new google.maps.LatLng(35.681382, 139.766084);
var mapOptions = {
zoom: 10,
center: latlng
};
var map = new google.maps.Map(document.getElementById(‘map_canvas’), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}

YOUR_API_KEYは自分が取得したAPIを記入します。なお、現在では、Google mapのどのサービスでもAPI取得は必須になったようです。

APIキーの取得

自分のホームページにGoogle mapを埋め込むには、まずは「APIキー」というキーを取得しなければなりません。APIとは「アプリケーションプログラミングインタフェース」の略で、ソフトウエアのコンポーネントが互いにやり取りするインターフェイスのことを指します。

そう言っても、イマイチわかりにくいですよね。このAPI取得はなんのためかというと、自分のソフトウエアの一部を外部に公開することによって、誰でもが外部から利用できるようにするためなのです。

マップに限らず、例えばインスタグラムがFacebookのIDで利用できたりしますよね。あのことを指しているのです。

APIキーの取得は、APIを提供している企業の専用サイトへ行って、自身のアプリケーション情報を登録することからはじまります。Google mapでしたら、当然、Googleに申請します。

この方法では、具体的には単純に地図を表示させるたけではなくて、「最寄駅からのルート」や「お店までの道のり」などの計算ができます。

そのやり方は、Google mapを表示させた上で、左上にある「無題の地図」をクリックし、地図のタイトルをつけて保存します。

次に検索窓にあなたのサービスを入力して検索し、表示されたコメントから「地図に追加」をクリックします。これで、あなたのサービスが地図に追加されました。

なお、場所のアイコンで違う形にしたり、好きな色に替えたり、ルートを検索したりできます。例えば矢印マークの「ルートボタン」では、徒歩や自転車、車の別に目的地までの所要時間を計算し、それを共有したりということもできます。

応用編といいながら、操作方法はいたってシンプルです。

Google mapをホームページに埋め込んでみよう！（Google Maps embed API利用編）

より高度な埋め込み方法であるGoogle Maps APIのひとつにembed APIがあります。これによりアクセスマップを作成したり、二点間の距離や店舗の検索などができます。パラメータを設定するだけで、簡単に色々な地図をホームページに埋め込むことができるのはとても便利です。

「共有」の設定からはじめる

ただ、この地図を自分だけで見ていたのではあまり意味がありません。同じ地図を見ている人に「共有」することで、意味を持つ地図になります。

そのやりかたは、マップの左側にあるメニューから「共有」を選んでクリックするだけです。

共有設定の画面になりますので、アクセスできるユーザーの「自分だけが閲覧」をクリックし、リンクの共有で「ON-Web上で一般公開」に変更します。

こうすることで、地図を見ている他の人も情報を共有できます。

Google mapをホームページに埋め込んでみよう！（WordPress利用編）

ウェブサイトの管理をWordPressを使って行っている方も多いかと思います。実際にWordPressに埋め込む方法を順を追って見ていきましょう。

Google mapで埋め込みコードを取得する

埋め込みコードを取得するための手順をご紹介します。まずGoogle mapで埋め込みたい場所を表示させることから始まります。

地図のカスタムサイズは自由に横縦幅を指定することができます。自分のサイトに合ったサイズを指定したい場合に利用すると良いと思われます。

以上の手順で埋め込みコードを取得することができました。コードはクリップボードに保存されている状態です。次の工程では実際にWordPressに貼り付けていきましょう。

WordPressに埋め込みコードを貼り付ける

埋め込みコードの貼り付けはテキストモードで行うことになります。手順は下記のようにすすめていきましょう。

以上の操作で貼り付けは完了です。コードを取得する時にサイズを指定しましたが、この貼り付ける段階でも調整することは可能です。「width=”○○○” height=”○○○”」の部分を書き換えることで好きなサイズへと変形させることができるようになっています。

経路付きの地図を埋め込むには

ここまでの手順でGoogle mapの埋め込み方法はマスターできたかと思われます。しかし地図は目的地への行き方を示すものでもあります。できならルートを示した地図を埋め込みたいというのが本音ですよね。

実は埋め込みコードを取得する段階でルートを表示させておけば埋め込み時にも反映させることができるのです。ここでは 経路付きの地図を埋め込む方法 を見ていきたいと思います。

以上の操作で経路付き地図の埋め込みコードを取得することができました。後はWordPressに貼り付けするだけです。そちらの手順に変更はありませんので前項を参考にしつつ行ってみてください。

Google mapをホームページに埋め込んでみよう！（WordPress Simple Map利用編）

WordPressにGoogle mapを埋め込むには埋め込みコードを利用する以外にも方法があります。それは「Simple Map」というプラグインを利用する方法です。

埋め込みコードの変わりに一定の書式に従って住所を入力するだけというものです。詳細を見ていきましょう。

プラグイン「Simple Map」をインストールする

まずはプラグインをインストールするところです。

以上の手順で「Simple Map」のインストールが完了しました。利用するための準備が整いましたので次項では実際の使い方を見ていきましょう。

ショートコードを利用してGoogle mapを挿入する

それでは実際に地図を埋め込んでいきたいと思います。埋め込みたい住所を[map addr=”住所”]という書式に従って入力していくことが求められます。

例：[map addr=”東京都墨田区押上１丁目１ー２”]

例えばこのように入力すると東京スカイツリーを表示するGoogle mapが埋め込まれることになるのです。また埋め込みコード利用時と同じくテキストモードで行う必要がありますのでご注意ください。

地図のサイズを指定したい場合は住所の後に記述することで対応可能です。

例：[map addr=”東京都墨田区押上１丁目１ー２” width=”300px” height=”200px”]

まとめ

ここでは、Google mapの概要と、自分のHPなどに埋め込む方法をご紹介致しましたが、いかがだったでしょうか？

Google mapは、簡単な設定で、自分のHPなどに地図を埋め込むことができるサービスです。応用編では、2店間の距離や、他の店舗なども表示することができます。

それにはまずGoogle mapのAPIを取得しなければなりません。これが英語なのでちょっと面倒くさいですが、いったん取得してしまうと半永久的に使えますので、ちょっと頑張ってみてはいかがでしょうか？

1 2