【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> 地図に四角を描くサンプル

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