コース: JavaScript 実践講座：jQueryでGoogle Maps APIを使ってみよう
今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
多角形の作成と地図上への表示
このレッスンでは Google Maps API を使って 前回のレッスンで設定した座標を利用して 実際に地図上へ多角形の図形を 描画する方法について解説します まずダウンロードしてきたこちらの polygon_show というフォルダの中にある― これら３つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まず javascript.js をエディターで 確認してみます 前回のレッスンでは地図上に 多角形を表示する為に その多角形のそれぞれの角に当たる 地点の緯度・経度を指定して そのデータを配列として １つの変数に格納しました その配列のデータはというと こちらの polygonPaths でしたね 今回はその作成した座標の入った 変数を使って 実際に多角形を作成して地図上に 描画してみたいと思います その作成して描画する部分のプログラムですが この javascript.js ですと こちらの下にあるこの部分となります では 実際にどのように多角形を作成して 地図上に表示しているのか順に 目で追って確認して行きましょう まずは 多角形の作成です それはこちらの部分となります まず変数を定義していますね var と書いて 今回の変数の名前は cities としています そして = と書いて new google.maps.polygon と書きます そして ( { を作ってあげて その中に paths というキーを作っています そしてその値を前回のレッスンで作った― この座標の入った配列の変数 polygonPaths を指定してあげています こうすることでこちらの cities の変数の中には これら４つの座標がそれぞれの角になった― 多角形のデータがこちらに格納されてきます そして実際にこの作成した多角形を 地図上に表示させる方法は こちらの部分となります まずはこちらで作った多角形のデータ cities の変数を書いて そして . と書いて その後に setMap( ) と書きます そしてその ( ) の中の引数には 表示させたい地図が格納された 変数 map を入れ込んでいます ではこの状態で index.html…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。