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

vol1_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ファイル)を配備する形をとります。

mapデモ_ファイル配備方法_r

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]

自分のAPIキーに変更する

コード内のハイライトしている行に【YOUR_API_KEY】と書かれているところがあると思います。この部分をvol.0で用意したご自分のAPIキーに差し替えてください。こうすることで指定したAPIキーを使用してMaps JavaScript APIを利用することができます。

↓この部分を

↓このようにします(key=の後ろにAPIキーを挿入)

再度Webサーバーを起動して確認

これでGoogleMapを表示するための準備が整いました!ブラウザで確認してみましょう。

Webサーバーを終了させていた場合は再度起動、起動しぱなしの場合はページをリロード(F5)して再度読み込みます。

以下のように地図が表示されていれば無事APIを使用できています!

もし上手く表示されない場合は?

  • Webサーバーを起動して確認しているか
  • コードの内容、ファイルの配備方法に誤りはないか
  • GCPでAPIキーが有効になっているか
  • HTMLに挿入したAPIキーに間違いはないか

等を確認してみてください。

次回:コードの内容解説+ちょっとカスタマイズ

今回は最初の一歩としてGoogleMapを実際にAPIを利用して表示してもらいました。内容の理解はさておき大きな一歩です!

次回vol.2では今回作成してもらったHTML/CSS/JavaScriptについて補足しつつ、コードをカスタマイズして表示する地図を少し変化させてみようと思います。

【※vol.2執筆中。ちょっとまってね】

よかったらシェアしてね!
  • URLをコピーしました!