初めてのGoogle Maps API

住所入力フォームの作成と、移動ボタンへのクリックイベントの登録

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
住所を入力する為のフォームを地図上に作成して、「移動」ボタンにクリックイベントを登録する方法について解説致します。
講師:
04:06

字幕

このレッスンでは Google Maps API の ジオコーディング機能を利用していくにあたり 地図上に住所入力フォームを作成する方法 及び 移動ボタンにクリックイベントを 登録する方法について 解説していきます まずはダウンロードしてきた こちらの geocording_html というフォルダの中に入っている これら 3つのファイルをエディタで開いて下さい そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めて行きましょう それでは まず 現状の index.html ファイルを ブラウザで開いて 内容を確認してみましょう こちらの index.html を ブラウザで開きます すると このように表示されてきましたね 今回はこちらのフォーム部分の作成方法と こちらの移動ボタンをクリックした時に このように 移動ボタンにクリックイベントを登録して ダイアログをだす所まで 解説していきたいと思います それでは「OK」ボタンを押して 閉じます そして エディタに戻ります まず フォーム部分のコーディングですが こちらは この index.html ファイルの この部分となります フォーム自体が地図上の 上にあったからといって こちらのように その id="map" の 外側に そのフォームのパーツを書きます そして id="geocording" と 打ってあげていますね これをベースに css で その位置を調節して 地図の上に持ってきます stylesheet.css を 開いてみましょう そして こちらの部分ですね こちらの部分で そのフォーム部分の スタイルを設定しています このように大枠の div#geocording に対して position: absolute; を指定してあげていて そして right と bottom そして z-index を指定してあげることによって 地図の右下部分に 表示させるようにしています あとは 通常通りの スタイルの設定で大丈夫です それでは次に 移動ボタンをクリックした時に ダイアログを表示させるように 移動ボタンにクリックイベントを登録する 方法について見ていきたいと思います それでは javascript.js を エディタで開きます 今回ご説明する所は こちらの部分となります まずは $( 'div#geocording の直下にあるボタンに on('click' ,function としていますね このようにすることで クリックイベントを登録することができます そして この function の後の {} の間 こちらに そのボタンをクリックされた時の 処理を書いていきます まずは $(this) .blur(); これでクリックした際のフォーカスが 意図的に外れるようにしています そして こちらの return false に関しては ボタンが持つデフォルトの動作というものを 破棄するようにしています そして その間で囲まれた部分に alert(); と書いて その () の中に 「移動ボタンをクリックしました」 といった文言を書いているわけです このようにすることで 移動ボタンに対して クリックイベントを登録することができました 以上でレッスンは終了です 今回は地図上への住所入力フォームの作成 および移動ボタンへのクリックイベントの 登録方法について解説いたしました 以降のレッスンでは実際に Google Maps API の ジオコーディング機能を使って 入力された住所から 緯度経度を取得する方法について 解説していきますので そちらも合わせてご覧下さい

初めてのGoogle Maps API

このコースではGoogle Maps APIをJavaScriptとjQueryを利用してサイトに実装する方法について学習します。これらについての基本的な説明から、地図の表示方法や設置した地図上にマーカーや情報ウィンドウを設置する方法までを丁寧に解説します。このコースをマスターすれば、さまざまな用途に応じた地図をサイト上に作成できるようになります。

1時間52分 (28 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。