HTML 技術ログ

住所データをGoogleMapで可視化

【ページ更新日:2020年10月16日】

データベース上の住所データをGoogle Mapを使って可視化する。

記事の内容
  • GoogleMapのAPIを使用する方法
  • 住所データをGoogleMapで表現する方法

GoogleMapのAPIを使用する

GoogleMapのAPIを使用する方法を紹介します。

APIとは

Application Programming Interfaceの略称

「ソフトウェアの機能を共有する仕組み」と言われます。


例えば、GoogleMapのAPIを活用すると、

住所データをMap上で表現することができます。

欧州中央銀行(ECB)が提供するAPIを活用すると、

為替データを取得することができます。

まず、Googleが提供する開発者向けのサイトに移動します。

Googleアカウントでログインしてない人は、画面右上からログインしてください。

次に、画面右上の「Console(操作盤)」ボタンをクリックします。

すると、次のようなConsole画面に移動します。

画面上部にある「プロジェクトの選択」をクリックしてください。

下の写真だと赤い部分にあります。

プロジェクトの選択画面が表示されるので、右上の「新しいプロジェクト」をクリックします。

新しいプロジェクトを作成する画面に移動します。

好きなプロジェクト名を入力して、「作成 」をクリックします。

プロジェクト名はデフォルトの名前でもOKです。

画面右上で、先ほどのプロジェクトが作成されたかを確認してください。

緑色のチェックマークが入れば作成が完了しています。

プロジェクトの作成が完了したことが確認できたら、

先ほどと同様に、画面上部の「プロジェクトの選択」をクリックします。

プロジェクトの選択画面が表示されるので、

先ほど作成したプロジェクトをクリックします。

すると、つぎのような複数のAPIの画面が表示されます。

(表示されない場合は、画面左側の「API」から移動できます。)

今回は、「Maps Embed API」を使用します。

複数あるAPIの中から、「Maps Embed API」をクリックします。

住所データをGoogleMapで表現する

  • この記事を書いた人
  • 最新記事

Maita Tomoya / yone

2020.4~Webアプリケーションエンジニアとして都内の企業で働き、空いている時間でブログを運営している29歳男です。本ブログは情報の整理をするため、文章を書く機会を作るために始めました。1記事でも多く「誰かのためになる記事」を書けるように頑張ります!転職前は地方の高校で働いていました。教育関係の記事も定期的に書いていきたいと思います。

-HTML, 技術ログ