https://bftnagoya.hateblo.jp/entry/2021/07/16/110011

初めに

こんにちは！株式会社BFT新人エンジニアのないとうです。
全３回でGoogle Map を表示する連載、第３回です。
前回はGoogle Mapをブラウザで表示するためのwebサーバーを作りました。
前回はこちら↓
bftnagoya.hateblo.jp

今回はwebサーバー上で動くhtmlファイルを作成し、そこに取得したGoogle Maps PlatformのAPIキーを用いてコーディングを行うことでブラウザ上にMAPを表示せていきたいと思います。

　　　　　　　　　　　　　　　　それではやっていきましょう！！

今回使用した環境

CentOS Linux 8 (2105)
Apache HTTP Server 2.4.37
Visual Studio Code 1.57.1 （ほかのテキストエディタでもOK）

前提条件

Google Maps Platform で使う、APIキーを取得している
Maps JavaScript API を有効化している
Apache HTTP Server が起動できる

手順

1.MAPを表示するためのhtmlファイルを配置するディレクトリの作成

$ cd /var/www/html
$ sudo mkdir "ディレクトリ名"

ディレクトリ名については自由につけて構わない（今回はディレクトリ名を【map】とした）
また/var/www/htmlの配下に直接ファイルをおいてもよいが管理をしやすいようにディレクトリを作成することを推奨する

2.MAPを表示するためのhtmlファイル作成

$ sudo touch "ファイル名".html

ファイル名については自由につけて構わないが拡張子は【.html】とすること
（今回はファイル名を【index.html】とした）

3.MAP表示プログラムのコーディング

3.1.テキストエディタで先ほど作成したファイルを開く
3.2.プログラムを記述

<html lang="ja">
    <head>
        <!---言語設定--->
        <meta charset="UTF-8" />

        <!---画面幅に合うようにサイズを調整する--->
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />

        <!---Internet Explorerを使用可能にする（Internet Explorer以外で表示する場合は必要なし）--->
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <!---タイトル（任意のものでよい）--->
        <title>Google Maps</title>
        <!---見た目設定今回は画面全体にMAPが表示されるようにした--->
        <style>
            #map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <!---MAPを表示する要素を作成--->
        <div id="map"></div>
        <script>
            //MAP表示関数
            function initMap() {
                var map = new google.maps.Map(document.getElementById("map"), {
                    //中央を設定
                    center: { lat: 35.681236, lng: 139.767125 },
                    //ズーム設定
                    zoom: 17,
                    //MAP移動許可
                    draggable: true
                })
            }
        </script>

        <!---APIの読み込み--->
        <script src="https://maps.googleapis.com/maps/api/js?key=’こ こ に API キ ー を 入 れる’" async defer></script>
    </body>
</html>

4.MAP表示確認

4.1.Apache HTTP Serverの起動

$ systemctl start httpd

4.2.ブラウザで表示確認
ブラウザで
http://localhost/"ディレクトリ名"/"ファイル名"
にアクセス
画像のようにマップが表示されれば完了
f:id:bftnagoya:20210715133457p:plain

終わりに

この連載ではGoogle Maps Platform を用いて、Google Mapをブラウザ上に表示させました。
しかしGoogle Maps Platformは MAPの表示のほかにもマーカーの設置や座標と住所の変換、経路検索など様々な機能があります。ですので興味がありましたら是非調べてみてください。
私もGoogle Maps Platformについてまだまだ投稿していきたいと思っています。

ここまで見ていただきありがとうございました。

参考文献

今日から始める Google Maps Platform 入門　著者:nekoze
表紙:maro
p15-26
booth.pm