Google Maps Embed API を利用してWebページ内にGoogle Mapを表示する

概要

Webページ内にGoogle Mapの地図を埋め込んで表示したい場合があります。この記事では、Google Maps Embed API を利用してWebページ内にGoogle Mapを埋め込んで表示するコードを紹介します。

事前準備

Google Maps Embed API の有効化

Google Maps Embed APIを有効にする必要があります。こちらの記事の手順に従って Maps Embed API を有効にしてください。

Google Maps API キーの取得

Maps APIを呼び出すためのAPIキーを取得します。APIキーの取得手順はこちらの記事を参照してください。

プログラム例

Google Map を埋め込むHTMLファイルを作成します。

コード

下記のコードのHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <p>GoogleMap 埋め込みテスト</p>

  <iframe width="600" height="400" frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/view?key=(APIキーの値)&center=35.681263,139.767937&zoom=15" allowfullscreen>
  </iframe>

</body>
</html>

解説

下記のiframe タグ部分がGoogle Map の表示エリアのコードになります。
src 属性にGoogle MapのURLを設定します。URLのkeyパラメーターに APIキーの値を設定します。また、center パラメーターには表示する地図の中心の緯度経度を与えます。今回は東京駅の緯度経度をcenterの値に設定しています。zoom は拡大・縮小の値です。大きい値にするほど拡大した地図が表示されます。

  <iframe width="600" height="400" frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/view?key=(APIキーの値)&center=35.681263,139.767937&zoom=15" allowfullscreen>
  </iframe>

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページ内にGoogle Map の地図が表示されることが確認できました。

Google Maps Embed API を利用してWebページ内にGoogle Mapを表示する:画像1

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

作成日: 2021-07-16

目次