GoogleMaps API が2018年から Google Cloud Platform へ変更、Static Map 表示方法まとめ

Google Maps API

GoogleMapをWebサイトに表示させたい時に使っていた Google Maps API の使い方が色々変更されていてちゃんと表示されないので、あらためて調べてまとめた2021年完全版です。

ステップ概要

  1. Google Cloud Platform(GCP)への登録(最初だけ。ここは過去 Google Maps API と呼ばれていた)
  2. お支払いページでクレカ登録(限度以上のアクセスがあると請求されるが、企業案内サイト程度ならまずない)
  3. Map表示に必要な APIを有効化し、API認証コードを取得する
  4. HTMLにAPI認証コードを含んだScriptをペースト
  5. HTMLファイルをサーバーにアップ(オンラインであること。ローカルNG)
  6. ブラウザでアクセスして、MAPが表示されればほぼ完成。あとはCSSとHTMLなど分解して自由にスタイリング。
  7. 経度、緯度、ズーム、センターポジション、等微調整

スポンサードリンク

1)Google Cloud Platform への登録

2)お支払い

  • サイドバー「メニュー > お支払い」にある。
  • クレカ情報や三桁の暗証番号を入力
  • 電話番号入力は携帯番号を入れ、スマホに認証コードが届き入力

3)APIコード取得

  1. ホーム(サイドバー) > ダッシュボード > APIとサービス > ライブラリ
  2. APIを有効にする
  3. 検索フォームに「Maps Static Maps API」と入力し選択有効化
  4. 検索フォームに「Maps JavaScript API」と入力し選択、有効化
  5. 検索フォームに「Maps Embet API」と入力し選択、有効化
  6. サイドバー > 認証情報
  7. +認証情報を作成」> 「APIキー」選択
  8. APIコードをコピー
  9. APIに名前をつける(任意)
  10. 「アプリケーション制限タブ」でリファラー(API使用を許可するURL)を入力。
  11. API制限でMap関連API選び保存(面倒ならAPI制限はしなくてOK)
  12. ⚠️マークがなければ5分で反映
API有効化が必要なもの

有効化が必要なAPIライブラリは「Google Static Map」だけでは不十分らしく、最低でも以下の2点が必要。
Google Static Map

Google JavaScript API

地図が表示されずエラーになる場合

次の項目を確認すること。

✅ホーム(サイドバー) > ダッシュボード> APIとサービス > OAuth同意画面 > 公開ステータス > 「公開」になっているか確認。

4)HTMLにAPIコードをペースト

headコード(2018年以降は不要か?)

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true_or_false">

body最後部コード

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps API</title>
    <style>
      #Map {
      height: 400px;
      width: 100%;
      }
    </style>
  </head>
  <body>
 <!--HTMLに表示 -->
    <div id=Map></div>
 <!--Google Maps API -->
  <script>
    function initMap() {
      var mymark = {lat: 35.67241, lng: 139.48073};  // 目的地
      var park1 = {lat: 35.67295, lng: 139.48122}; // パーキング1
      var park2 = {lat: 35.67122, lng: 139.48}; // パーキング2
      var park3 = {lat: 35.67017, lng: 139.47816};  // パーキング3
      var mycenter = {lat: 35.6716, lng: 139.4797};  // センターポジション
 
      var map = new google.maps.Map(document.getElementById('Map'), {
        zoom: 17,  // ズーム値
        center: mycenter,
        scrollwheel: false  // スクロールの有無
      });
 
      var marker = new google.maps.Marker({
        position: mymark,
        map: map,
        animation: google.maps.Animation.DROP  // ドロップアニメの有無
      });
      // カスタムマーカーは下記コメント参照
      // var markerImg1 = {url: 'http://www.moranbong.tokyo/images/icons/icon_parking.png'}; // カスタムマーカーの画像ファイルを指定
      // icon: markerImg1 // カスタムマーカーの画像呼び出し
      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';    // マーカーの画像ファイルを指定
      var marker = new google.maps.Marker({
        position: park1,
        map: map,
        icon: iconBase + 'parking_lot_maps.png'   // マーカーの画像呼び出し
      });
      var marker = new google.maps.Marker({
        position: park2,
        map: map,
        icon: iconBase + 'parking_lot_maps.png'   // マーカーの画像呼び出し
      });
      var marker = new google.maps.Marker({
        position: park3,
        map: map,
        icon: iconBase + 'parking_lot_maps.png'   // マーカーの画像呼び出し
      });
    }
    </script>
    <!--Google Maps API - CODE -->
<script src="https://maps.googleapis.com/maps/api/js?key=あなたのGoogleMapsAPIコードをここに&callback=initMap" async defer></script>
</body>
</html>
以降のステップはは任意カスタマイズで

緯度、経度などは任意に入力。

2018年以前の古い案内はこちら

スポンサードリンク

参考になったサイト

この記事を書いた人

mojigumi

「もじぐみ」の代表、コウです。
専門は企画・出版・編集・印刷、Webデザインと管理。最近はブログ、動画、3DCG、AR、LINEスタンプ等のコンテンツ配信にも力をいれ、自分自身もランニングアートでコンテンツ化に努めています。