【ご注意】「このページでは Googleマップが正しく読み込まれませんでした」と表示されていませんか？ | ポータルサイトHack

2018/11/14

設置したGoogle Mapがエラー表示になっていませんか？
仕様が変わり、APIキーが必須となっています。
※「Google Maps 以外の地図サービスは？」もご参考ください。
Google Mapを設置してあるページを確認し、エラーが出ていたらすぐにAPIキーを取得しましょう。

Google Map APIキーの取得

まずは「Google Cloud」のコンソールにログインします。
Googleアカウントが必要になりますのであらかじめ取得しておきましょう。

◯Google Cloud
https://cloud.google.com/maps-platform/?hl=ja

上記ページのメニューにある「コンソール」をクリック。
ログインしたら次の流れに沿って設定を行います。

プロジェクトの作成

ダッシュボードに表示されている「作成」ボタンをクリック。
すでに他のプロジェクトが設定されている場合は「プロジェクトの選択」をクリックし、「新しいプロジェクト」をクリックします。

プロジェクト名を登録

プロジェクト名を登録し作成ボタンをクリック

APIとサービスの有効化

プロジェクトを作成すると「APIとサービス」に移動するので、「APIとサービスの有効化」を行います。
APIのライブラリで「Maps Javascript API」を探してクリック。見当たらない場合はキーワード検索を利用しましょう。
「Maps Javascript API」を有効化し次の作業に進みます。

Maps Javascript APIの認証

「Maps JavaScript API」の設定画面にある「認証情報」をクリック。
「認証情報を作成」から「APIキー」を選択します。
APIキーが作成されるので、そのまま「キーの制限」を行います。

キーの制限について

Google Mapはページの表示数によって課金する仕組みとなったため、APIキーに制限をかけないと悪用される危険性があります。
必ず制限をかけてセキュリティ対策を怠らないようにしましょう。

制限ページが表示されたら「名前（任意）」を入力し、アプリケーションの制限から「HTTPリファラー（ウェブサイト）」を選択。
Google Mapを表示したいサイトのURLを下記のように入力します。

https://axel-media.comの場合
⇒axel-media.com/*

保存を押して完了です。

サイトに掲載

下記のコードを張り付ければ基本的な地図は表示されます。
目的に応じてオプションの設定を行いましょう。

Javascript（headタグ内かbody終了タグ直前）


<script src="https://maps.googleapis.com/maps/api/js?key=ここに取得したAPIキーを入力&callback=initMap" async defer></script>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 35.686003, lng: 139.728286},
      zoom: 16
    });
  }
</script>

bodyタグ内


<div id="map" style="width:600px; height:400px"></div>

これで一応は完成・・・とはいきません。
課金制になったということは文中でお伝えしましたが、このままだと制限があり、ほとんど機能しません。

請求先アカウントの登録

「今まで無料に使えていたのに・・・」という方には頭の痛い状況ですが、上記の設定で正しく表示できる回数は1日1回です。
「Maps JavaScript API」の設定画面にある「割り当て」を見るとわかりますが、「Map loads per day 」のところが”1″となっていて非常に寂しいかぎりです。
ただ「請求先アカウントの登録（クレジット情報登録必須）」を行えば毎月200ドル分まで無料で利用できるので、登録を行いましょう。
※請求先アカウントの登録は「Map loads per day」のペンアイコンをクリックするとリンクテキストが表示されます。

まとめ

「Google Map」の課金は数年前から予告されていましたが、ここ数か月でいっきに加速した状況です。
ひきつづき無料範囲内でGoogle Mapを利用するのか、他のサービスを利用するのか判断が迫られています。