【vol.1：基本編】APIを使ってGoogleMapを表示してみよう／Google Maps Platformをはじめよう！

この記事では実際にMaps JavaScript APIを使用してGoogleMapを表示するところまでやってみます。

[st-kaiwa1]Maps JavaScript APIを使うための準備がまだ出来てない方は先に以下の記事を見て、APIを利用できるようになってからこの記事に戻ってきてね！[/st-kaiwa1]

[st-card id=2002]

HTML／CSS（基本となるページ）の準備

まずは最小限のプログラムを用意して、実際に表示されることを体感してみましょう。

コードの内容についての補足は次回vol.2の記事にて行うとして、今回はAPIを使用しGoogleMapをブラウザ表示させることをゴールとします。

HTML

まずはHTMLファイルを作成しましょう。後で解説しますのでとりあえず今は何も考えずコピペでOKです。ファイル名はindex.htmlとします。

[code lang=”html” highlight=”8-9″]
<!doctype html>
<html lang=”ja”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<link rel=”stylesheet” href=”./index.css”>
<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=”anonymous”>
<title>Hello, GoogleMap!</title>
</head>
<body>
<div class=”container”>
<div class=”row justify-content-center”>
<div class=”col-md-8″>
<h1 class=”text-center”>Hello, GoogleMap!</h1>
<div id=”result”>
<!– GoogleMap –>
<div id=”map-canvas”></div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

注意：BootStrap4のCDNを利用しています

この「Google Maps Platformをはじめうよう！」ではAPIを扱うために必要なコード、以外のコード（特にデザインやレイアウトに関する記述）を最小限に抑えるためにCSSフレームワーク「BootStrap4」を使用しています。ハイライトしている部分でBootStrap4のCDNを呼び出していますので、不要な方は適宜削除してください。

CSS

続いてCSSを作成します。

マップを表示する部分のスタイルを調整しています。基本的なレイアウトはBootStrapで整えているので一先ずこれだけでOK。ファイル名はindex.cssとします。

[code lang=”css”]
#map-canvas {
width: 100%;
height: 300px;
background: #eee;
}
[/code]

Webサーバーを起動して途中経過確認

ここまで準備できたら一度ブラウザで確認しておきましょう。

開発に慣れている方であればお好きなように確認していただいてかまいませんが、プログラミング初心者の方は記事と同じように進めていくことをおすすめします。

この連載では基本的に以下のようにデスクトップにdemoフォルダを作成、その中に更にサンプル毎のフォルダを作成（今回使うのはmap-sample-01）、その中にプログラム（上で作成したHTML、CSS、後述するJavaScriptファイル）を配備する形をとります。

Webサーバーの立ち上げ方が分からない方はこちらの記事を参考にしてみてください。

[st-card id=117]

この記事と同じように進めたい方は上記Webサーバーの立ち上げ方を参考に、ドキュメントルートを「demo」にしてhttp://localhost:8000/map-sample-01/index.htmlにアクセスしてください。

以下のような画面が表示されたらOKです！

APIを使ってGoogleMapを表示しよう

いよいよキモとなるAPIを呼び出してGoogleMapを表示するためのスクリプトを書いていきます。

JavaScript

新しくファイルを作成し内容は以下のようにします。

[code lang=”js”]
/**
* GoogleMap表示
*/
const initMap = () => {
const result = document.getElementById(‘map-canvas’);
const map = new google.maps.Map(result, {
center: {lat: 39.717634, lng: 140.129693},
zoom: 13
});
};

document.addEventListener(‘DOMContentLoaded’, () => {
initMap();
}, false);
[/code]

ファイル名は何でも良いですがこの記事ではinit.jsとします。作成できたら以下のようにHTML／CSSと同じ階層に置きましょう。

HTML（追記）

先ほど作成してもらったHTMLに、APIを使用するためのコードと、JSファイル（init.js）を呼び出すためのコードを追記します。

（ハイライト部分を追記してください）

[code lang=”html” highlight=”24-27″]
<!doctype html>
<html lang=”ja”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<link rel=”stylesheet” href=”./index.css”>
<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=”anonymous”>
<title>Hello, GoogleMap!</title>
</head>
<body>
<div class=”container”>
<div class=”row justify-content-center”>
<div class=”col-md-8″>
<h1 class=”text-center”>Hello, GoogleMap!</h1>
<div id=”result”>
<!– GoogleMap –>
<div id=”map-canvas”></div>
</div>
</div>
</div>
</div>
<!– GoogleMaps API –>
<script src=”//maps.googleapis.com/maps/api/js?key=【YOUR_API_KEY】”></script>
<!– init.js読み込み –>
<script type=”text/javascript” src=”./init.js”></script>
</body>
</html>
[/code]