3-2

Maps JavaScript APIでマップを表⽰する

Mapsサービスで提供されているMaps JavaScript APIを使ってマップを表⽰しましょう。Maps JavaScript API とは、名前の通りウェブサイト上に地図を表⽰させる APIです。iframeなどで埋め込みむ⽅法とは異なり、地図のデザインやマーカーの配置など地図の細かい部分単位でのカスタマイズが可能です。

事前にGoogle CloudコンソールでAPIの有効化が済んでいるかどうか確認しましょう。有効化のやり⽅は事前準備の章を参考にしてください。

また、Maps JavaScript APIのリファレンスでAPIの仕様が確認できます。

https://developers.google.com/maps/documentation/javascript/reference/

雛形を作成する

実際に簡単なマップをWEBサイト上に表⽰してみましょう。まずはマップを表⽰するためのテンプレートファイルを作成する必要があります。

ターミナルからtouchコマンドでindex.htmlという名前のテンプレートファイルを作成しましょう。作成できたら、テキストエディタで開きましょう。Visual Studio Code の場合、「ファイル」>「開く」> index.htmlのファイルの保存場所まで移動>ファイルを選択の⼿順で開くことができます。

tbf6_google_maps_sample/chap03


Copied!
$ touch index.html

続いてhtmlファイルのマークアップを⾏います。今回は以下の雛形を⽤意しました。 head要素内にマップがブラウザの全画⾯で表⽰できるようにCSSで調整しております。

index.html

HTML
1234567891011121314151617181920212223242526
                          
Copied!
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,
   initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Google Maps</title>
  <style>
   #map {
     height: 100%;
   }
   html,
   body {
     height: 100%; 
     margin: 0; 
     padding: 0; 
   } 
 </style> 
</head>

<body> 
  <div id="map"></div> 
</body>

</html>

APIを読み込む

次にMaps JavaScript APIを読み込む処理を追加します。body要素の閉じタグの⼿前に、以下のコードを記述します。keyパラメータには作成したAPIキーを⼊⼒しましょう。

index.html

HTML
12
  
Copied!
<script src="https://maps.googleapis.com/maps/api/js?key=ここに API キーを⼊れ る" 
async defer></script>

これでMaps JavaScript APIを動かす準備が整いました。

マップを描画する
マップを描画する処理をJavaScriptで実装していきます。Maps JavaScript APIを読み込んでいるscriptタグの上に新たにscriptタグを作成し、以下のコードを記述します。

index.html

HTML
12345678910
          
Copied!
<script> 
function initMap() { 
  var map = new google.maps.Map(document.getElementById(’map’), { 
    center: { lat: 35.681236, lng: 139.767125 }, 
    zoom: 17 
  }) 
} 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=ここに API キーを⼊れ
る" async defer></script>

Mapクラス
マップを描画するには、Mapクラスのインスタンスを利⽤します。第1引数にはマップを表⽰させたいdiv要素、第2引数にはマップを描画するためのオプションオブジェクトを指定します。今回は雛形に記載されている通り、mapという名前のid属性が付与されたdiv要素を指定しています。第2引数には必須パラメータであるcenter, zoomプロパティを定義しています。オプションのプロパティについて後ほど解説していきます。

最後にAPIのURLにcallback値にはinitMapを記述します。これを追加することで、APIが読み込まれた際にinitMap関数が⾃動で呼び出されるようになります。

index.html

HTML
12
  
Copied!
<script src="https://maps.googleapis.com/maps/api/js?key=ここにAPIキーを⼊れる
&callback=initMap" async defer></script>

index.htmlファイルをブラウザ上で開くと、以下の画像のようにGoogle Mapsの地図が描画されます。

間違いや改善の指摘

質問ポリシー①

教材の内容に関する質問を投稿しましょう

今日からはじめるGoogle Maps Platform 入門

0章 : はじめに

1章 : Google Maps Platform とは何か？

2章 : 開発の準備をしよう

3章 : Maps サービスを使ってみよう

4章 : Places サービスを使ってみよう

5章 : Routes サービスを使ってみよう

6章 : 【実践編】Vue.jsでマップベースのWEBアプリケーションを作ってみよう

7章 : あとがき

Maps JavaScript APIでマップを表⽰する

雛形を作成する