Google Map APIで地図上に円を表示してみた

f:id:twx:20190807115036p:plain — Google Map APIで地図上に円を表示してみた

Google MapのAPIに「Maps JavaScript API」というものがあり、これを使うとブラウザ上でGoogle Mapを操作したり図形を描画したりすることができます。今回は、Google Map上に円を表示するスクリプトをご紹介します。

まずは、Google Cloud Platformのコンソールにアクセスし、「Maps JavaScript API」を有効化します。

Google Cloud Platform

左のメニューバーから「APIとサービス」→「ライブラリ」を選択してください
f:id:twx:20190807120015p:plain

「Maps JavaScript API」を選択してください
f:id:twx:20190807120019p:plain

APIを有効にしてください
f:id:twx:20190807120026p:plain

管理画面に行き、「認証情報」→「キー」を確認してください
f:id:twx:20190807120034p:plain

次に、ローカルに以下のhtmlファイルを作ります。拡張子が .html であれば名前は何でも良いです。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map {height: 100%;}
      html, body {height: 100%; margin: 0; padding: 0;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: 37.090, lng: -95.712},
          mapTypeId: 'terrain'
        });

        var citymap = {
          a: {
            center: {lat: 10.0, lng: -87.0},
            radius: 1000000
          },
          b: {
            center: {lat: 40.0, lng: -87.0},
            radius: 1000000
          },
          c: {
            center: {lat: 80.0, lng: -87.0},
            radius: 1000000
          },
        };

        for (var city in citymap) {
          var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: '#FF0000',
            fillOpacity: 0.30,
            map: map,
            center: citymap[city].center,
            radius: citymap[city].radius
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=『あなたのAPIキー』&callback=initMap">
    </script>
  </body>
</html>

下から4行目の 『あなたのAPIキー』 の部分を、先程確認したAPIキーに置き換えてください。

コードを少し解説します。

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: 37.090, lng: -95.712},
          mapTypeId: 'terrain'
        });

この部分で、Google Mapのオブジェクトを作成しています。

zoom は、マップを表示するときの拡大率です。0のときに最もズームアウトされ、この値が大きいほどズームインします。

center は、マップを表示するときの中心点です。緯度経度をハッシュで指定します。

mapTypeId は、マップのタイプです。次の中から選べます。

roadmap: Google Mapで最も一般的なデフォルトのマップ。道路や区画が描画されている地図。
satellite: Google Earthの衛星画像
hybrid: 通常の地図と衛星画像が混在したマップ
terrain: 地形情報に基づいたマップ

次にこの部分です。

        var citymap = {
          a: {
            center: {lat: 10.0, lng: -87.0},
            radius: 1000000
          },
          b: {
            center: {lat: 40.0, lng: -87.0},
            radius: 1000000
          },
          c: {
            center: {lat: 80.0, lng: -87.0},
            radius: 1000000
          },
        };

ここでは、3つの円 a , b , c を、中心点の緯度経度と半径で定義しています。今回は、半径と経度は同じで緯度だけ異なる3つの円を定義しました。

最後に、この部分です。

          var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: '#FF0000',
            fillOpacity: 0.30,
            map: map,
            center: citymap[city].center,
            radius: citymap[city].radius
          });

ここでは、 google.maps.Circle という関数で、円をマップ上に描画しています。枠線の色・透明度・太さ、塗りつぶしの色・透明度を指定できます。

このファイルを保存し、ブラウザで開くと…

こんな感じで地図上に円が描画された図が表示されます。

f:id:twx:20190807120537p:plain