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(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

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

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

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

2016.07.24

スタイルマップを使用して地図の雰囲気を変えてみる

みんさん、こんにちは!

いつも見慣れたグーグルマップだけど、利用するためには地図の色が雰囲気に合わない事ってありますよね? 実はグーグルマップ・・・

続きを読む

2016.09.27

MarkerClusterer ライブラリの紹介

みなさん、こんにちは!

 

Google Maps 上に 店舗の情報などマーカーをたくさん描画したとき、マーカー・・・

続きを読む

2017.05.01

Google Places API オートコンプリートで地名検索を素早くする

みんさん、こんちには。

今回は、Google Places API のオートコンプリートについて、ご紹介します。

オートコ・・・

続きを読む

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