Googleマップを 埋め込む方法と Google Maps APIについて解説 !

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

便利なGoogleのサービスであるGoogleマップをブログ記事やサイトに埋め込む方法と、Googleマップをより便利に使いこなすGoogle maps APIについてご紹介します。

Googleマップをサイトに埋め込む方法とは?


Googleマップは、Googleサービスのひとつである地図検索機能。この便利な地図を自分のWebサイトやブログ、お店のHPに表示できます。

サイトにGoogleマップを表示させるには、大きく分けて2つの方法があります。
1つが「埋め込みコード」もう1つが「Google maps API」です。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

埋め込みコードで地図を表示させる

この「埋め込みコード」はGoogleマップを表示させて、順番に設定していくので、誰にでも比較的簡単に行えます。

まずは、端末でGoogleマップを表示させ、「共有」ボタンから「地図を埋め込む」を選択します。すると、地図の大きさを選べるタブと「埋め込みコード(HTMLコード)」が表示されます。

地図の大きさを選択し、埋め込みコードをコピーして、表示させたいサイトやブログのHTMLに貼り付ければ埋め込み完了です。

ひとつの店舗の場所を表示させたいなど、簡単な使用目的であるならこの方法がシンプルです。Googleマップの経路検索を使って検索した結果から埋め込むと経路図を表示させることもできます。

Google maps APIで埋め込む

Google maps APIは、Googleマップのさまざまな機能をサイトやアプリ作成に活用できるサービスです。

例えば、お店の詳細な場所までのルートを表示させたり、オリジナルな画像を使ってマップを制作したり、地図自体の色やデザインを変えてサイトの雰囲気に合わせたりすることが可能になります。

基本的には世界中の人が誰でも自由に使うことができ、より高いデザインやカスタマイズ性の高い地図を設置する場合に適しています。
Google maps APIは無料で利用できる上、Java Scriptで動作しているので、地図を設置するサーバーのプログラムの影響を受けません。

Google maps APIの利用を始めるにはGoogleユーザーアカウントとAPIキーの取得が必要です。

APIキーを取得するには、まずGoogle Developers Consoleにアクセスして、プロジェクトを作成します。
画面に沿って設定し、管理画面でGoogle maps APIを有効にし、「認証情報(APIキー)」を取得すれば利用できるようになります。

埋め込みするのは「Your API Key」と記載された場所に取得したAPIキーを貼り付けたら、htmlファイルを表示させます。

正常に表示されればOK!

Google maps APIを利用する上での注意点

大変便利なサービスですが、実際に使用するには注意が必要です。

無料のサービスとはいえ、すべてが無料になるわけではありません。
Google maps APIは機能ごとに1日の中でアップロードできる上限が決まっています。

月に200ドルまでは無料で利用できますが、アクセス量や使用量に応じて利用料がかるようになります。

また、無料で利用できるサービスですが、自身のアカウントに支払い情報の登録が必須です。

Google maps APIを使わずに埋め込む


Google maps APIだと、料金が加算されるのが不安。アクセス数がどれくらいかかるかわからないから、こわい。などGoogle maps APIを使いたくなけれど、地図をカスタマイズしたい場合の方法です。

Googleマップをインラインフレーム「iframe」で埋め込む方法です。
この方法で、色合いなどのカスタマイズが多少可能になります。

iframeのソースにEmbed APIへのURLを設定し、パラメーターで位置を設定します。
CSSのfilterプロパティを使って色合いを調整します。

filterプロパティは、画像にぼかしや透過、明度や彩度、影やコントラストなど、様々な視覚効果を与える際に使われています。iframeやbackground、text-decorationなどにも使用できます。

まとめ

スマートフォンの普及に伴い、Googleマップは私たちの生活の中で、もはや必要不可欠なITサービスになっています。

お店や商業施設、公共施設の位置情報を表示させる、お店のレビューを閲覧する、カーナビゲーションの代わりに利用、GPS機能で自分の位置情報を相手に知らせるなど、たくさんのユーザーが色々な方法で利用しているGoogleマップは、今後どのような進化をしていくのでしょうか。

Googleマップの新しいサービスによって私たちの生活もどう進化いくのかも期待大です!

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree