[ Google Maps API を使用して地図を表示 ]

Delphi Programming / Object Pascal

[掲載 2021年05月29日] [更新 2021年06月01日]

Google Maps API を使用して地図を表示
動作確認等	Windows 7 U64(SP1) + ForeFox 88.0.1 (64 ビット) 画像保存のプログラムは Delphi XE(UP1) Pro

2018年6月11日、 Google の地図情報サービス API が全て Google Maps Platform として Google Cloud Platform に統合管理され、料金体系が変わりました．Google Maps 関係 API の利用には，API キーの使用と決済情報の登録 (課金登録) が必須となっています．要件を満たさない場合，地図は表示されません．新しい料金体系では，無料枠の範囲を超えると自動的に課金されます．
下図は，Maps JavaScript API を使用して，ウェブブラウザで地図を表示した結果です．課金登録していないので，「このページでは Google マップが正しく読み込まれませんでした」のダイアログが表示されて，地図はグレー表示になります．このダイアログの [OK] ボタンをクリックしても，地図はグレー表示のままです．

正常に表示できた時の [地図] と [航空写真] です．[航空写真] 表示からは，ストリートビュー表示ができます．

テストに使用した HTML コードです．UTF-8 で保存します．
<head> 部の script src コードの YOUR_KEY を，自分の API キーの値に置き換えます．そうすれば，その API キーが有効に機能するかを確認できます．center は緯度と経度で指定します．地名や住所を指定して表示したい場合は，地名や住所から緯度と経度を調べておくか，その機能を JavaScript で実装します．
このコードは動作確認のテスト用です．このままサーバに UP して他の方が利用すると，HTML のソースコードを表示，あるいは HTML をダウンロードすることによって API キーの値を読まれてしまいます．実際の運用では，API キーを HTML コードから隠すなどの処理が必要です．

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Google Map</title>
<script src="https://maps.google.com/maps/api/js?language=ja&key=YOUR_KEY"></script>
</head>

<body>
  地図の表示例
  <div id="map" style="width:480px; height:320px"></div>

  <script>
    var mapOptions = {
      zoom: 15,                                       // 地図の縮尺値
      center:new google.maps.LatLng(35.681, 139.767), // 地図中心緯度と経度
      mapTypeId: 'roadmap'                            // 地図の種類  
      };
    // 地図を複数表示する場合は,表示要素(場所)を変えてオプションで緯度,経度を設定  
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  </script>

</body>
</html>

地図の画像を表示する例です．Google Cloud Platform の設定で Maps static API を有効にします．Google Maps の地図を画像として表示するには署名 (signature) が必要ですが，ローカル環境 (開発環境) で実行する場合は不要にも設定できます．これ以降のテストでは signature を省略しています．以下の最初のリンクの記事を参考にしてください．
<img src= の部分は，実際には 1 行にします．地図の表示場所としての center には，日本語を含む地名や住所も指定できます．生成可能な画像サイズは scale，size オプションの値によって決まりますが，取得サイズには制限があります．
画像の形式は PNG がデフォルトです．
この場合も，実際の運用では，API キーを HTML コードから隠すなどの処理が必要です．

参考リンク
Google Static Mapsを使ってみた | アトム電器三軒家店 - 地図画像の取得
Google Mapの地図の画像を取得するには | 山本隆の開発日誌
[HTTP サーバの環境変数を取得] - ページの最後を参照

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Google Map</title>
</head>

<body>
  <img src="https://maps.googleapis.com/maps/api/staticmap?
size=480x320&center=35.681, 139.767&zoom=15&key=YOUR_KEY"> 
</body>
</html>

ウェブブラウザの URL 欄に直接 Google Mpas の URL (上のコードでは src の値) を入力して表示した場合は，ウェブブラウザの中央に画像が表示されます．
Maps static API の設定と URL を確認する簡単な方法と言えます．

上の図のように，ウェブブラウザで地図の画像を表示できれば，その時の URL が地図の画像の URL ということになります．その URL を使用して，Googe Maps の地図画像を保存する例です．
下図は，保存した画像を TImage に表示しています．
保存画像の形式はデフォルトで png 画像となっています．Jpeg 形式の画像で保存するには，オプションに format=jpg を追加し，保存ファイルの拡張子を .jpg にします．gif 形式の画像で保存する時は format=gif にして，保存ファイルの拡張子を .gif にします．保存の拡張子を間違えると，TImage に読み込んで表示する際に例外が発生します．

language=ja がないと下図のような画像になりました．

implementation

uses
  UrlMon,
  PNGImage,
  GIFImg,
  jpeg;

{$R *.dfm}

//=============================================================================
//  ダウンロードと TImage への画像表示
//=============================================================================
procedure TForm1.Button1Click(Sender: TObject);
var
  LMapSrc   : string;
  LSavePath : string;
begin
  LMapSrc := 'https://maps.googleapis.com/maps/api/staticmap'
           + '?center=35.681, 139.767'
           + '&size=480x320'
           + '&zoom=14'
           + '&sensor=false'
           + '&language=ja'
           + '&key=YOUR_KEY';
  LSavePath := ExtractFilePath(Application.ExeName) + 'staticmap.png';

  URLDownloadToFile(nil, PChar(LMapSrc), PChar(LSavePath), 0, nil);

  Image1.Picture.LoadFromFile(LSavePath);
end;

地図の場所を日本語 (地名や住所など) で指定する場合は，エンコードが必要です．このコードではパラメータ全体をエンコードしていますが，?center=' + TIdURI.ParamsEncode('大阪駅') のように，日本語の文字列だけのエンコードでも構いません．

  LMapSrc := 'https://maps.googleapis.com/maps/api/staticmap'
           + '?center=大阪駅'
           + '&size=480x320'
           + '&zoom=15'
           + '&sensor=false'
           + '&language=ja'
           + '&key=YOUR_KEY';
  // パラメータのエンコード．uses に IdURI が必要        
  LMapSrc := TIdURI.ParamsEncode(LMapSrc);

この記事は，某掲示板の質問のレス用に作成したのですが，2021年06月01日現在，筆者は Google の課金登録はしていませんので，地図の表示もダウンロードもできなくなっています．
このような関係に疎いせいかも知れませんが，Google API 関係の必要な設定画面 (ページ) を表示するのに苦労しました．
ネットで Google Maps Platform，Maps JavaScript API あるいは Maps Static API で検索すると，詳しい解説のページが見つかります．

Google API 関係の設定ページ (要 Google アカウント) とドキュメント
Google Cloud Platform
Maps JavaScript API
Maps Static API