【Maps JavaScript API】取得したAPIキーを使って地図を表示する

前回は、Google Maps JavaScript API のAPIキーの取得について解説をしました。
今回はその取得したAPIキーを使って、ライブラリの読み込みから、地図を表示させるまでの解説していきたいと思います。

ライブラリの読み込み

Google Maps JavaScript APIを利用する為に、Googleのサーバーに設置してあるライブラリ（JavaScriptファイル）を読み込みます。
前回取得したAPIキーを以下YOUR_API_KEYの部分にセットしてください。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript">  </script>

上記scriptタグは</body>の閉じタグの上部に設置しましょう。

callback パラメータは、API が完全に読み込まれたあと、initMap 関数を実行します。
async 属性は、API の読み込み中に、ブラウザがページの残りを引き続きレンダリングできるようにします。
key パラメータには API キーが含まれます。

地図を表示する

まずはシンプルな地図を表示してみましょう。
html、css、JavaScriptの基本については、Google Maps API を使うために最低限必要な知識とはの記事を参考にしてください。
大切なポイントに重点を置いて解説していきます。
（※以下サンプルコードをそのまま使用しても地図が表示されます。まだ難しい場合はまずコピーして使用してみてください。）

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 500px;
        width:500px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.681167, lng: 139.767052},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

1地図を表示するためのコンテンツとなるdiv要素を作成します。
　このdivにid属性値をつけていますが、名前は自由に決めて問題ありません。

20	`<div` `id="map"></div>`

2地図のdiv要素にスタイルを適用します。
地図を表示するためのコンテンツには、必ず横幅と縦幅を指定する必要があります。
スタイルを指定していない場合は、地図が表示されなくなるので、忘れないよう注意してください。

#map {
       height: 500px;
       width:500px;
}

3マップインスタンスを作成します
callback パラメータで、API が完全に読み込まれたあとに実行される、initMap 関数にマップインスタンスを作成するための記述をします。
マップを表す JavaScript クラスは Map クラスとなります。
第1引数に地図を表示するコンテンツのdiv要素、第2引数にオプションとなるオブジェクトを指定しましょう。
インスタンスを代入した変数(map)は、今後地図を操作する場合に利用しますのでグローバル変数としています。
一度表示した後、特に地図を操作しない場合はグローバル変数とする必要はないので、「var map =」としても良いですし、書かなくても問題ありません。

<script>
   var map;
   function initMap() {
     //インスタンスを作成
     map = new google.maps.Map(document.getElementById('map'), {
       //地図のオプション
       center: {lat: 35.681167, lng: 139.767052},
       zoom: 8
     });
   }
 </script>

デモページはこちらこれでシンプルな地図を表示することができましたね。
まずは地図を表示させるためのベースとなる記述をしっかり理解しておきましょう。
それでは次回以降、更に詳しく地図のオプションや地図のスタイル等についてみていきましょう。

ご質問などございましたら、お気軽に下記コメント欄にお寄せください。

※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。

Maps Flow!

このブログを検索