こーひーをぶんなぐれ！ - GoogleMaps APIの基礎 - 図形を描く

図形

地図上に図形を書くことができる．線，任意の多角形，長方形，円などである．座標は緯度経度を用いて記述する．

線 - Polyline

// draw_figure_polyline.js
window.addEventListener('load', () => { //登録する関数オブジェクト記述開始
  //地図表示に必要なパラメータを保持するconstオブジェクト
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    // ズームレベル
    zoom: 16
  };

  // 地図の作成
  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);

  // 線の座標の配列を作る
  // 日野キャンパスから豊田駅まで
  const routeCoodinates = [
    {lat:35.661128, lng:139.368175},
    {lat:35.659174, lng:139.368078},
    {lat:35.658597, lng:139.375685},
    {lat:35.658432, lng:139.376165},
    {lat:35.658631, lng:139.377686},
    {lat:35.658969, lng:139.378496},
    {lat:35.660815, lng:139.380524},
    {lat:35.660116, lng:139.381248}
  ];

  // Polylineのパラメータを作る
  const routeElements = {
    path: routeCoodinates, //作った線の座標の配列
    geodesic: true, //球に沿った線にするか(true)，平面に沿った線にするか(false)
    strokeColor: '#FF0000', // 色指定．CSSの色指定と同じ
    strokeOpacity: 0.5, //透過の設定．0.0〜1.0
    strokeWeight: 2 //線の太さ
  };
  // 線のオブジェクトを作る
  const routePolyline = new google.maps.Polyline(routeElements);
  // 地図に表示する
  routePolyline.setMap(myMap);

  // routePolyline.setMap(null); を実行すると，地図上から消える
});

任意の多角形 - Polygon

// draw_figure_polylgon.js
window.addEventListener('load', () => { //登録する関数オブジェクト記述開始
  //地図表示に必要なパラメータを保持するconstオブジェクト
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    // ズームレベル
    zoom: 16
  };

  // 地図の作成
  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);

  // 多角形の座標の配列を作る
  // 日野キャンパスを囲む形
  const areaCoodinates = [
    {lat:35.663035, lng:139.367836},
    {lat:35.660566, lng:139.362477},
    {lat:35.659551, lng:139.361971},
    {lat:35.659148, lng:139.368113},
    {lat:35.661465, lng:139.368183}
  ];

  // Polylineのパラメータを作る
  const areaElements = {
    path: areaCoodinates, //作った線の座標の配列
    geodesic: true, //球に沿った線にするか(true)，平面に沿った線にするか(false)
    strokeColor: '#FF0000', // 線の色指定．CSSの色指定と同じ
    strokeOpacity: 0.5, //透過の設定．0.0〜1.0
    strokeWeight: 2, //線の太さ
    fillColor: '#880000', // 多角形の内側の色
    fillOpacity: 0.25 // 多角形の内側の透過
  };
  // 多角形のオブジェクトを作る
  const areaPolygon = new google.maps.Polygon(areaElements);
  // 地図に表示する
  areaPolygon.setMap(myMap);

  // areaPolygon.setMap(null); を実行すると，地図上から消える
});

長方形 - Rectangle

// draw_figure_rectangle.js
window.addEventListener('load', () => { //登録する関数オブジェクト記述開始
  //地図表示に必要なパラメータを保持するconstオブジェクト
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    // ズームレベル
    zoom: 16
  };

  // 地図の作成
  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);

  // 長方形のパラメータを作る
  const  rectangleElements = {
    bounds: { //これが座標
      north: 35.662440, //northとsouthは緯度指定
      south: 35.660181,
      east: 139.368162,//eastとwestは経度指定
      west: 139.365013
    },
    strokeColor: '#FF0000',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#880000',
    fillOpacity: 0.25,
  };

  // 長方形のオブジェクトを作る
  const areaRectangle = new google.maps.Rectangle(rectangleElements);
  // 地図に表示する
  areaRectangle.setMap(myMap);

  // areaRectangle.setMap(null); を実行すると，地図上から消える
});

円 - Circle

// draw_figure_circle.js
window.addEventListener('load', () => { //登録する関数オブジェクト記述開始
  //地図表示に必要なパラメータを保持するconstオブジェクト
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    // ズームレベル
    zoom: 16
  };

  // 地図の作成
  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);

  // 円のパラメータを作る
  const  circleElements = {
    center: mapElement.center, //地図の描画に使った中心点をそのまま再利用
    radius: 100, // 半径
    strokeColor: '#FF0000',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#880000',
    fillOpacity: 0.25,
  };

  // 円オブジェクトを作成．
  const areaCircle = new google.maps.Circle(circleElements);
  // 地図に表示する
  areaCircle.setMap(myMap);

  // areaCircle.setMap(null); を実行すると，地図上から消える
});