【Google Map】地図上に四角い線を描いてみる

Google Map に 四角い線を描きたいと思いました。

・ブラウザで、GMapを開くと、URLに中心座標(35.68269759362687, 139.76947098539154)が表示されているので、取得しておく。

&ll=35.68269759362687%2C139.76947098539154&z=15

・GMap 上で、シェイプを描く。

・地図のデータを、kml ファイルで、エクスポートする。

kml ファイル の中の座標を取得

        <coordinates>
          139.7646859,35.6874218,0
          139.7608235,35.6768248,0
          139.7685054,35.6737569,0
          139.7741273,35.6842149,0
          139.7646859,35.6874218,0
        </coordinates>

Google Cloud Platform で、Google Map を有効にして、APIキーを取得する。

・index.html を作り、中心座標と、四角の座標をセットする。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>地図に四角を描くサンプル</title>

  <!-- 動作処理 -->
  <script>
    // 現在地取得処理
    function initMap() {
      // Geolocation APIに対応している
      if (navigator.geolocation) {

        // 現在地を取得
        navigator.geolocation.getCurrentPosition(
          // 取得成功した場合
          function(position) {
            // 緯度・経度を変数に格納
            var mapLatLng = new google.maps.LatLng(35.68269759362687, 139.76947098539154);
            // マップオプションを変数に格納
            var mapOptions = {
              zoom : 15,          // 拡大倍率
              center : mapLatLng  // 緯度・経度
            };
            // マップオブジェクト作成
            var map = new google.maps.Map(
              document.getElementById("map"), // マップを表示する要素
              mapOptions         // マップオプション
            );
            // マップにマーカーを表示する
            var marker = new google.maps.Marker({
              map : map,             // 対象の地図オブジェクト
              position : mapLatLng   // 緯度・経度
            });

            var pline = new google.maps.Polyline({
                map:map,
                path:[
    {lat:35.6874218, lng:139.7646859},
    {lat:35.6768248, lng:139.7608235},
    {lat:35.6737569, lng:139.7685054},
    {lat:35.6842149, lng:139.7741273},
    {lat:35.6874218, lng:139.7646859}
                  ],
              strokeColor: "rgb(136, 14, 79)",  //線色(def:#000000)
              strokeOpacity: 1,     //透明度0~1(def:1)
              strokeWeight: 5,          //px指定(def:1)
              zIndex: 1                     //重なり順
            });

          },
          // 取得失敗した場合
          function(error) {
            // エラーメッセージを表示
            switch(error.code) {
              case 1: // PERMISSION_DENIED
                alert("位置情報の利用が許可されていません");
                break;
              case 2: // POSITION_UNAVAILABLE
                alert("現在位置が取得できませんでした");
                break;
              case 3: // TIMEOUT
                alert("タイムアウトになりました");
                break;
              default:
                alert("その他のエラー(エラーコード:"+error.code+")");
                break;
            }
          }
        );
      // Geolocation APIに対応していない
      } else {
        alert("この端末では位置情報が取得できません");
      }

    }

  </script>
</head>
<body>
  <div id="map" style="width:800px; height:600px"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=【Google API キー】&v=3&callback=initMap"></script>
</body>
</html>

すると、地図上に四角い線が描けます。