初めてのGoogle Maps API

ズームレベルの設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webページに設置した、地図のズームレベルを設定する方法について解説致します。
講師:
03:29

字幕

このレッスンでは Google Maps API を使って ウェブページ上に表示した 地図のズームレベルを設定する方法― について解説いたします まずはダウンロードしてきた こちらの map_zoom という フォルダの中に入っている これら3つのファイルを エディタで開いてください そしてこれが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説をすすめていきます 早速レッスンを始めましょう それではまずこの index.html を ブラウザで開いて 現状のマップの見え方を確認してみましょう こちらの index.html をブラウザで開きます するとこのように 日本列島が 表示されている状態になっていますね 今回はこちらのマップの ズームレベルを調整して マップを拡大したり縮小したりする方法 について見ていきたいと思います それではエディタに戻ります そしてこちらの javascript.js を開きます そうすると前回のレッスンで作成した マップのプログラムが書かれていますね 今回 注目するのは こちらの zoom という値です 現在は 5 となっていますね これはこの地図のズームレベルが 5 ということを表しています それではこちらの値を 試しに 3 と変えてみましょう そしてこの状態で javascript.js を保存します ファイルの保存のキーボードショートカットは Mac ですと Command + S Windows ですと Ctrl + S の同時押しでしたね それではファイルを保存して index.html をブラウザで開きます こちらのファイルをブラウザで開きます するとこのように地図が 縮小されて表示されてきましたね それではエディタに戻ります 次にズームレベルを上げて 地図を拡大してみたいと思います 次はここを 10 としてみましょうか そしてファイルを保存します 先程と同じように index.html をブラウザで開いてみます するとこのように かなり拡大された状態になりましたね エディタに戻ります それではもっと拡大してみましょうか ここを 16 としてみましょう そして保存をして ブラウザで開いてみます こちらを開きます するとさらに拡大されてきましたね それではエディタに戻ります このように var(変数) mapOptions の中の zoom の値の数値を変えることによって マップの表示の拡大や 縮小をすることができるわけです 以上でレッスンは終了です 今回は 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宛までご連絡ください。