google maps APIで地図を表示する

GoogleマップのAPIキーを取得する

前回はHTMLファイルの作成まで行ったため、
今回はGoogle Maps APIを動かす時に必須なAPIキーを取得していきます。

以下のサイト等を参考にしてGoogleMapの APIキーを取得してみてください。
GoogleMapsのAPIキーを簡単に取得する:ねんでブログ

HTMLのひな形の準備

最初に、ひな形を準備します。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>GoogleMapsAPIテスト</title>
</head>
<body>
  <p>以下に地図を表示</p>
  <div id="map" style="width:620px; height:400px"></div>
  <!-- ここにスクリプトを書いていきます -->
</body>
</html>

コメントアウト部にスクリプトを書きます。

地図を表示する

地図を表示するためには、以下の4ステップが必要です。

①：マップのオプション(地図の拡大値や中心地)を決める
②：マップ表示用の変数を作る
③：マップを生成
④：マップを見えるようにする

以下、1ステップずつ解説していきます。

①: マップのオプション(地図の拡大値や中心地)を決める

showmap1.js
// zoomのあとのnumは拡大率(1〜15) 大きいと拡大された状態で表示される
// latitudeは緯度、longitudeは経度の意
var mapoptions = {
  zoom: num
  center: new google.maps.LatLng(latitude,longitude)
}

②：マップ表示用の変数を作る

showmap2.js
directionsDisplay = new google.maps.DirectionsRenderer();

③：マップを生成
この段階ではまだ見えるようにはなっていません。

showmap3.js
map = new google.maps.Map(document.getElementById("map"), mapOptions);

document.getElementById("map")という部分は、
HTML上のIdがmapであるもののところにつくりなさい、という意味となります。

④：マップが見えるようにする

showmap4.js
directionsDisplay.setMap(map);

以上の4つのステップであなたのサイト上にGoogleMapsを載せることができます。
次からは実際のソースコードを載せていきます。

実際のソースコード

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>GoogleMapsAPIテスト</title>
</head>
<body>
  <p>以下に地図を表示</p>
  <div id="map" style="width:620px; height:400px"></div>
  <script type="text/javascript">
    function initMap () {
      var directionsDisplay;
      var map;

      // 地図の大きさと中心地を決める。
      var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(35.658034, 139.701636)
      }

      // マップ表示用
      directionsDisplay = new google.maps.DirectionsRenderer();

      map = new google.maps.Map(document.getElementById("map"), mapOptions);
      directionsDisplay.setMap(map);
    }
  </script>

  <!-- 以下はGoogleMapsAPIの読み込み
  callback=initMapとしているため、この行が読み込まれたときに、
  ↑に書いてあるinitMapという関数が呼ばれる -->

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YourAPIKey&callback=initMap"></script>
</body>
</html>

※ YourAPIKeyの部分を、最初にゲットしたAPIキーに置換してください。
結果として、以下のように渋谷駅周辺が表示されます。

GoogleMapsAPIでの渋谷の画像