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.02.11

Directions API で巡回セールスマン問題を解決する

みなさん、こんにちは。
今回は、Google Maps Directions API で、巡回セールスマン問題を解決する方法を解説します・・・

続きを読む

2017.03.22

Google マップで「竹島」と表示する方法は?

みなさん、こんにちは。

Google Maps JavaScript API は、みなさんご存知のとおり多言語に対応した地図です。そのため、l・・・

続きを読む

2016.06.30

Google Maps APIsのライブラリ読み込み方法

みなさん、こんにちは!

Google Maps API のライブラリを読み込む方法は1つじゃないってご存知でしたか?

&n・・・

続きを読む

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

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

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

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

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