初めてのGoogle Maps API

マップコントロールの有効/無効化

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ズームコントロールや、移動コントロールなど地図上に表示されているコントロールの有効/無効を切り替える方法について、解説致します。
講師:
03:49

字幕

このレッスンでは Google Maps API を使って ウェブページ上の地図の上に表示されている ズームコントロールや移動コントロール といったマップコントロールの有効 無効の 切り替えの方法について解説いたします まずはダウンロードしてきた 「 map_control 」というフォルダの中に 入っているこれら3つの ファイルをエディターで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう まずはこの index.html をブラウザで開いて 現状の地図の見え方を 確認してみたいと思います こちらの index.html をブラウザで開きます するとこのように表示されましたね 今回のファイルでは地図の中心地を東京として マップのズームレベルを 15 としています さて今回のレッスンで有効 無効を 切り替える部分ですが こちらの部分となります この移動コントロールや ズームコントロール そして ここのマップタイプコントロールですね こういった地図上に 表示されているコントローラーを 有効にしたり無効にしたりする方法に ついて見ていきたいと思います それではエディターに戻ります そして javascript.js を開きます 現在はマップコントロールが 有効になっている状態でしたね では このマップコントロールを 無効にしてみたいと思います 無効にするためにはこちらの変数 「 mapOptions 」の中に 項目を1つ足して設定していきます 例えばこちらの「 zoom 」の後に コンマを置いて そして この部分にこのように書きます 「 disable 」 「 DefaultUI 」と書きます 「 disableDefaultUI 」ですね そしてこの後にコロンを書いて この後に「 true 」と書きます そして この状態でファイルを保存します そして index.html を ブラウザで開いてみましょう こちらのファイルをブラウザで開きます すると先ほどまであった 地図のコントローラーが 消えていることに気づきましたでしょうか このようにすることでマップコントローラーを 無効にすることができます それではエディターに戻ります それでは今度は逆に有効にしてみましょうか 今ここに「 true 」と 書いてあるところを消して 「 false 」と書きます そしてファイルを保存して index.html をブラウザで開きます すると今度はこれらのコントローラーが 表示されてきましたね このようにしてマップコントローラーの 有効 無効を切り替えることができます それではエディターに戻ります 以上でレッスンは終了です  今回は Google Maps API を使って 地図上のマップコントロールの有効 無効を 切り替える方法について解説いたしました 以降のレッスンでは Google Maps API を使って 地図上の任意の位置にマーカーを 表示する方法について 解説していきますので そちらも合わせてご覧ください

初めてのGoogle Maps API

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

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

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

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

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