Google MapのAPIに「Maps JavaScript API」というものがあり、これを使うとブラウザ上でGoogle Mapを操作したり図形を描画したりすることができます。 今回は、Google Map上に円を表示するスクリプトをご紹介します。
まずは、Google Cloud Platformのコンソールにアクセスし、「Maps JavaScript API」を有効化します。
左のメニューバーから「APIとサービス」→「ライブラリ」を選択してください
「Maps JavaScript API」を選択してください
APIを有効にしてください
管理画面に行き、「認証情報」→「キー」を確認してください
次に、ローカルに以下の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
という関数で、円をマップ上に描画しています。
枠線の色・透明度・太さ、塗りつぶしの色・透明度を指定できます。
このファイルを保存し、ブラウザで開くと…
こんな感じで地図上に円が描画された図が表示されます。
各円の半径はすべて同じに設定したはずですが、この図を見ると半径が異なっているように見えます。これは、Maps JavaScript APIで表示される地図がメルカトル図法であるためです。曲に近付くほど見た目上の面積が大きく見えます。
以上、Google Map APIで地図上に円を表示する方法をまとめました。良い記事だと思っていただいた方は、以下の「★+」ボタンのクリック、SNSでのシェア、「読者になる」ボタンのクリックをお願いします。