Webページの埋め込みGoogleマップが有料化!?一部APIキーが必要になる。プラグインは?SimpleMapは?これが簡単なチェック方法と対応方法。

Webページの埋め込みGoogleマップが有料化!?一部APIキーが必要になる。プラグインは?SimpleMapは?これが簡単なチェック方法と対応方法。

BuzFixの埋め込み地図

 

 

BuzFixでは、記事で地図を表示したいときには、Googleマップが表示されるようにしています。

例えばゴールデンウィークのおすすめスポットを紹介する記事では、そのポイントを直観的にお伝えするためには地図が欠かせません。

単にGoogleマップを埋め込みで使う方法もありますが、ちょっと表示がはみ出したりして使いづらかったので、僕は『Simple Map』というプラグインを使っています。

こちらがSimple Mapプラグインをインストール、アクティブにしている状態です。

 

 

Simple Mapにはこうしたメリットがあります。

  • Googleマップで検索してタグを拾ってくる手間が不要
  • 自動でスマートフォンに対応した地図にしてくれる
  • スマートフォンでは指でスクロールしない画像に変換してくれるのでイライラが無い(タップすると通常のGoogleマップが表示できます)

タグで埋め込むときは、こんな感じで書けば地図を埋め込むことができます。

※実際はmapタグは [ ]で囲います。

例)

“[“map zoom=”14″ height=”400px”]”清水公園フィールドアスレチック”[/map”]”

“清水公園フィールドアスレチック”

 

Googleマップの埋め込み機能を使う場合、いったんGoogleマップで「清水公園フィールドアスレチック」を検索して、その地図からタグを拾ってくるのが面倒なんです。

それをしないでいいだけでも、かなり便利なプラグインです。

他にもGoogleマップを表示してくれるプラグインはありましたが、機能的に十分で評価も良かったのでこれを選びました。

 

Advertisement

 

サイト埋め込みGoogleマップがAPIキー必須で有料化!?

 

 

2018年7月16日以降、Webページに埋め込んでいるGoogleマップが使えなくなる、表示されなくなるという噂を聴き、「マジか!?」と思い少し調べてみました。

どうもGoogle側の仕様変更で別途APIキーを使わないと表示されなくなるようになるらしいんですが、その対象が全てではありませんでした。

APIキーが必要な場合、有料化する場合、そのまま使える場合があるようです。

 

Advertisement

 

APIキーの追加が必要な場合(一部、有料化する場合)

「Static Maps API」
「Maps JavaScript API」
「Maps Embed API」

などのGoogle提供の対象APIを使用している

 

そのまま使える場合

  1. Googleマップから【地図を埋め込む】でページに設置している
  2. 「Static Maps API」
    「Maps JavaScript API」
    「Maps Embed API」
    などのAPIを使用していても、モバイル向けの場合は無料で利用できる場合がある

 

 

Advertisement

 

「う、、、む、、、」

 

前項で説明した通り、Googleマップから【地図を埋め込む】でページに設置しているわけではありません。

そうすると、プラグインごとに対応しているかどうかは、プラグインの仕様によることになります。

もし有料化するAPIを使っているプラグインの場合、無料提供されているプラグインなので、作成者が更新をやめてしまう可能性だってあります。

 

Advertisement

 

チェッカーを使ってみよう

 

 

そのプラグインがどういう仕様かどうかは作成者に問い合わせるのが手っ取り早いのかとも思いましたがちょいメンドクサイ。

そこで調べてみると、Googleから適合、不適合のチェッカーが提供されていました。

Google Chromeの拡張機能として提供されています。

使用するためには当然ながらGoogle Chromeの環境が必要です。

ブラウザが用意できたら、こちらの拡張機能をインストールしてください。

 

Advertisement

 

以下のURLからインストール画面を開けます。

 

 

拡張機能を有効にすると、ブラウザの右上(拡張機能が表示される部分)にこのようなマークが表示されます。

これで使用準備は完了です。

 

Google Chromeで対象となるGoogleマップを埋め込んでいるページを開きます。

こちらは「市原ぞうの国」を紹介した際のマップです。

 

Advertisement

 

すると、さきほどの右上のアイコンが「緑色」に変わります。

そのアイコンをクリックすると、このようにポップアップが表示されます。

SUCCESS」となっており、これで既にAPIに対して必要なAPIキーが使用された状態になっていることを表しています。

 

 

アイコンが「赤色」になり、「ERROR」となっている場合は別途、APIキーを設定しないといけません。

その際に、有料の場合が発生するようです。

 

もしこの表示だった場合は、慌てずにいったんマップを表示している画面を更新(F5など)してみてください。

 

Advertisement

 

その後上記のいずれかの表示に変われば問題ありません。

(ERRORだったら問題なんですけど(^^;

 

ただ、この場合の例外があります。

何度更新をしてもこの表示になる場合、APIを使用している場合と、Googleマップから埋め込んでいる場合のどちらでも起こりうるようです。

例えばGoogleマップの埋め込みで東京駅を埋め込む場合は以下のようなiframeタグになっていれば問題ないと思われます。

 

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.830828865203!2d139.7648629152707!3d35.68116728019437!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1530023984801″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

 

Advertisement

 

ところが使用しているタグに以下のようなものを使用している場合は、確実にAPIを使っているため、別途修正の必要性を確認してください。

チェックツールでAPIの使用までは判別できても、SuccessかErrorかを判別できないパターンということのようです。

 

https://www.google.com/maps/embed/v1/place?~

https://maps.google.co.jp/maps?output=embed&q=~

など

 

Advertisement

 

Googleへの確認方法

 

 

チェッカーでErrorになったり、不明な状態になった場合は、確認が必要です。

ただ、プラグインの場合はプラグインの作成者さんが本来やるべき処置かもしれませんので、いったんプラグイン作成者へ問い合わせた方が良いかもしれませんね。

 

一応掲載しておきますが、確認する場合は下記のページからいろいろと読んでいく必要があります。

ユーザー用ガイド
https://cloud.google.com/maps-platform/user-guide/

Google Maps Platform
https://cloud.google.com/maps-platform/

Google Maps Platform料金プラン
https://cloud.google.com/maps-platform/pricing/

 

Advertisement

 

まとめ

 

 

埋め込み地図があるかないかで、だいぶ記事の読みやすさ、理解度が変わってきます。

突然使えなくなったら困ります。

他にもGoogleが提供してるツールやAPIを活用しているアプリやプラグインは無数にあるでしょう。

そのくらい、Googleの提供するツールは世界のWebに浸透しているということです。

 

Advertisement

 

そんな地図を無料で使わせてくれているGoogleを責めるのは筋違いなのかもしれません。

まずは無料で使ってもらって膨大な動作データを取り、バグが減ったところで有料化するという開発手法はどこでもやっていることですから。

皆さんの中でもWebサイトを作っておられたら、この記事がお役にたてばよいのですが。

ここまでお読みいただきありがとうございました。

 

関連記事を紹介させていただきます。

といいますか、この記事内で使用したGoogleマップを表示している記事を厚かましくも宣伝しちゃいます(^^;;;

 

【最新1】ゴールデンウィーク関東の穴場【快適】スポット厳選の17選 Part 1

【最新2】ゴールデンウィーク関東の穴場【快適】スポット厳選の17選 Part 2

 

↓↓この記事がお役に立てたらボタンを押していただけると嬉しいです。

にほんブログ村 ニュースブログへ
にほんブログ村

↓↓これからも有益な情報を掲載していくので通知登録お願いします!

 

テクノロジーカテゴリの最新記事