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 マイビジネス に会社を登録すると可能になるんです。今度、マイビジネスへの登録方法もこのブログで紹介したいと思います。

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2017.02.11

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

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

続きを読む

2019.02.18

Google マップのコントロールを小さくしたい

みなさん、こんにちは。

最近の Dynamics Maps を利用すると地図を選択するコントロールやズームコントロールが大きくなっているこ・・・

続きを読む

2017.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Maps・・・

続きを読む

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