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. サイドバー > ダッシュボード
  2. APIを有効にする
  3. 検索フォームに「Google Static Maps API」と入力し選択
  4. 検索フォームに「Google JavaScript API」と入力し選択
  5. 「有効にする」選択
  6. サイドバー > 認証情報
  7. 「認証情報を作成」> 「API」選択
  8. APIをメモ(これが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

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制作をしていますが、最近は記事そのものや、ブログ、動画などのコンテンツ配信にも力をいれています。インターネットの時代はコンテンツプロバイダになるのがとても重要。自分自身もランニングアートなど、自分自身がコンテンツになるように心がけています。