読者です 読者をやめる 読者になる 読者になる

【JavaScript実践】 Google Mapを表示するための最小構成

JavaScript

この記事では以下の画面を作成する。

f:id:kosumoro:20160813025151j:plain

https://cosmology233.github.io/sandbox/hatena/2016/08/13/

Google Maps APIを利用してページに地図を描画するようなスクリプトを書いてみる。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>Practice JavaScript</title>
  <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
  <div id="googlemap" class="googlemap"></div>

  <script src="./scripts/script.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyBAVKOgsqfbsINYt2qjoLMziacVp6N8zBY&callback=initMap"></script>
</body>
</html>

Map描画用の div 要素を設置し、cssファイル、scriptファイル、Google Maps APIライブラリを読み込む。

Google Maps APIライブラリには keycallback パラメータを設定する。

key の値は以下のページからGoogle Maps JavaScript APIを有効にして取得する。

console.developers.google.com

callback の値は任意の文字列で構わないが、ライブラリ読み込み後に実行される関数名となるため、わかりやすい名前を付けておいたほうが良い。

styles/style.css

body {
  padding: 0; margin: 0;
}

.googlemap {
  width: 100%; height: 100vh;
}

Map描画用の div 要素には明示的に height の値を設定する。設定しないと高さが0の要素になってしまう。

scripts/script.js

ここからが本題。段階ごとにコードを書いていく。完成形は最も下のコードになる。

// コールバック用の関数ですべての処理をラップする。
function initMap() {
  /* Google Maps API読み込み後に実行される部分。 */
};

まずはコールバック用の関数を作成する。関数名はGoogle Maps APIライブラリの読み込み時に指定した callback パラメータの値と同じにする。

// コールバック用の関数ですべての処理をラップする。
function initMap() {
  /* Google Maps API読み込み後に実行される部分。 */
  
  // 描画用要素の取得
  let container = document.getElementById("googlemap");
  
  // Mapオブジェクトの初期化
  let map = new google.maps.Map(container);
};

次に必要な変数を設定していく。変数 containermap を設定する。

// コールバック用の関数ですべての処理をラップする。
function initMap() {
  /* Google Maps API読み込み後に実行される部分。 */
  
  // 描画用要素の取得
  let container = document.getElementById("googlemap");
  
  // Mapオブジェクトの初期化
  let map = new google.maps.Map(container);
  
  // Mapの倍率と中心座標を設定
  map.setOptions({
    "zoom": 15,
    "center": {
      "lat": 34.702,
      "lng": 135.495
    }
  });
};

Mapオブジェクトの setOptions メソッドで、描画する地図の設定を変更することができる。最低限 zoom (倍率)と center (中心座標)を設定する必要がある。

この段階でとりあえず描画用の div 要素に地図が描画される。