Google API 復習 ①地図の表示

今回ポートフォリオとして、非常時の避難先を登録するアプリケーションを作成し、以下4種類のGoogle APIを使用しました。

-Google Maps Javascript API
-Geocoding API
-Elevation API
-Distance Matrix API

かなりボリュームがあるので、小出しにして、記事にしたいと思います。初めて投稿するので、間違っている箇所がありましたら、ご指摘いただけると幸いです。＊APIを使用する為の準備については、有益な記事が複数ありました。下記に参考記事を記載します。

それでは本題に入ります。
第１部は、地図の表示についてです。
スクロール１回で終わります（笑）

まずビューに地図を表示させるために、idをmapとし、styleタグで領域を設定します。

  <div id="map" style="height: 400px; width: 600px;></div>

JavaScriptにはhtmlの要素を操作できる、**DOM(Document Object Model)**という仕組みがあり、以下の記述でid、mapの領域に予約を入れ、前述のオプションを適用する事で、地図が表示できます。オプションについては、好みに合わせてカスタマイズする事が出来ます。*zoom:解像度 center:中心地点 mapTypeId:地図タイプ

  var getMap = (function() {                         
    var getMap = (function() {
      function codeAddress(address) {// 地図表示に関するオプション
      var mapOptions = {
        zoom: 16,
        center: { lat: 35.662, lng: 139.703 },
        mapTypeId: "roadmap"
      };// 地図を表示させるインスタンスを生成
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
      console.log(map); …続く

      )};
    )};
  )};

最後にconsole.logで出力する事で、このように渋谷周辺を表示する事が出来ました。

[以下参考記事]
Rails5でGoogleMapを表示してみるまで
Google Maps Javascript API Reference
ドットインストール / Google Maps API入門（無料)
Javascript初心者向け / DOMとは？