MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.02.01

Embed API で会社のアクセスマップを作成する

アクセスマップの作り方

こんにちは。

会社のホームページにアクセスマップを作成することがありますが、みなさんどのように作成していますか?

昔はFLASHやイラストレータを使ってコテコテに作成したサイトをよく見かけましたが、最近は Google Maps を使用されているのではないでしょうか?

簡単ですからね。

 

マルティスープのホームページも当然アクセスマップを作成していますが、Google Maps Embed API を使用して作成しています。

この Google Maps Embed API は、iFrame 内に Google Maps を簡単に埋め込むことができるAPIで、なんと無償で使用することができます!

 

では使い方を説明します。

Google Developer Console にてAPIキー(ブラウザキー)を作成してください。また、API認証で Embed API を有効にする必要があります。

 

Embed API の基本URLです。

https://www.google.com/maps/embed/v1/{MODE}?{PARAMETER}

{MODE} には、下記の5つがあります。

place ・・・ 場所や住所を表示
directions ・・・ 2点間のルートを表示
search ・・・ 検索したお店などを表示
view ・・・ マーカーやルートを表示しない地図を表示
streetview ・・・ ストリートビューを表示

アクセスマップを作成するときは、「place」を使用します。

{PARAMETER} に設定する主な項目です。

q ・・・ 住所、緯度経度、名称など
key ・・・ API キー
zoom ・・・ ズームレベル

下記の例は、弊社(マルティスープ)を表示する例です。

<iframe src="https://www.google.com/maps/embed/v1/place?q=マルティスープ&key={API_KEY}&zoom=15" 
width="600" height="450" allowfullscreen="allowfullscreen"></iframe>

 

神保町駅からマルティスープまでの徒歩ルートを表示する例です。「directions」を利用します。

<iframe width="600" height="450" 
src="https://www.google.com/maps/embed/v1/directions?origin=神保町駅&destination=マルティスープ
&mode=walking&key={API_KEY}" allowfullscreen><iframe>

 

弊社がある神保町はカレーで有名な町です。神保町のカレー屋さんを表示する例です。「search」を利用します。

<iframe width="600" height="450" 
src="https://www.google.com/maps/embed/v1/search?q=神保町カレー&key={API_KEY}" allowfullscreen><iframe>

検索結果を見て神保町に、こんなにたくさんのカレー屋さんがあることにびっくりしました… 神保町にお越しの際は、是非カレーを堪能してください^^

 

いかがでしたか?

Embed API を使用すればパラメータを設定するだけで、簡単に色々な地図をホームページに埋め込むことができますね。

 

実は、下記のサイトを利用すると簡単に iframe のタグを作成することができます。

https://developers.google.com/maps/documentation/embed/start?hl=ja

 

★おすすめ情報

検索するとき、「マルティスープ」という会社名で検索できる理由を知っていますか?

実は、Google マイビジネス に会社を登録すると可能になるんです。今度、マイビジネスへの登録方法もこのブログで紹介したいと思います。

 

【関連記事】こんな記事も読まれています

2017.04.08

Googleマップで見る「ブラタモリマップ」を作成してみました

みなさん、こんにちは。

国民的人気番組「ブラタモリ」でタモリさんが訪れた街を Google マップ上で表示する「ブラタモリマップ」を作成し・・・

続きを読む

2017.10.28

GoogleマップにFusion Tablesを使ってマーカーを7万個描画する

みなさん、こんにちは。

今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript A・・・

続きを読む

2017.06.10

Street View Image API を初めて使ってみました

みなさん、こんにちは!

来週の 6月14、15日は、Google Cloud Next'17 が開催されます。皆さん、申込みしましたか? 

続きを読む

 - Google Maps APIs, Google Maps Embed API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)