[Work/Class/Google Maps APIの基礎/basic]

GoogleMaps APIの基礎 - 地図を表示させてマーカーを入れる

htmlの中に地図表示用のdivを配置し，そこに描画する，という形．

window.addEventListener('load', 関数オブジェクト);で，必要なファイルが全て読み込まれたら実行される関数オブジェクトを指定する．

HTMLファイル． 

<!DOCTYPE html>
<!-- display_marker.html -->
<html>
<head>
    <title>Google Maps API最初の一歩</title>
    <meta charset="utf-8">

    <!-- ちゃんと等倍で表示しましょうよ．スマホ側で勝手に倍率変えんなよ，という意味 -->
    <meta name="viewport" content="initial-scale=1.0">
    <!-- この中身は後からJavaScriptでも変更可能だったりする -->

    <!-- Google Maps APIをWeb上から読んでくる -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <!-- 自分で作ったJSファイル -->
    <script type="text/javascript" src="./display_marker.js"></script>

    <!-- とりあえずCSSを直接書いてしまう -->
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            /*
             div id=mapになってるdiv
             ここに地図
             高さ500ピクセル，幅は上位のdiv(ここではbody)の50%
            */
            height: 500px;
            width: 50%;
        }
    </style>
</head>
<body>
  <!-- bodyの中には地図表示用のマップ一つだけ -->
  <div id="map"></div>
</body>
</html>

htmlファイルから読まれるJavaScriptファイル． 

// display_marker.js

// window.addEventListenerに関数オブジェクトを登録しておくと，
// 全部のコンテンツの読み込みが終了した時に自動的に，
// 登録しておいた関数オブジェクトが次々と呼ばれる
window.addEventListener('load', () => { //登録する関数オブジェクト記述開始
  //地図表示に必要なパラメータを保持するconstオブジェクト
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    // ズームレベル
    zoom: 16
  };

  // 地図を保持するためのconstオブジェクトmyMapを宣言し，
  // GoogleMapsのコンストラクタの引数に，先に定義した地図表示に必要なパラメータを食わせる
  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);
  // コンストラクタが実行されると表示される

  // 日野キャンパス1号館にマーカを表示するためのパラメータのconstオブジェクト
  const firstMarkerElement = {
    // 1号館の緯度経度
    position: {lat:35.661930, lng:139.366485},
    // どのマップオブジェクトに表示するか
    map: myMap
  };

  // マーカのコンストラクタに，先に定義したマーカのパラメータのオブジェクトを食わせて
  // オブジェクトを取り出す
  const firstMarker =
    new google.maps.Marker(firstMarkerElement);
  // 同様にコンストラクタが実行されると表示される

} // window.addEventListenerに登録する関数オブジェクトの記述ここまで
); // window.addEventListener関数自体は，このセミコロンで終わって実行される