初めてのGoogle Maps API

マップタイプの設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webページに設置した、道路地図や航空写真といった、地図のマップタイプを設定する方法について解説致します。
講師:
04:26

字幕

このレッスンでは Google Maps API を使って ウェブページ上に表示している 地図のマップタイプ 要するに 道路地図や航空写真といった マップの種類を設定する 方法について解説いたします まずはダウンロードしてきた こちらの「 map_type 」という フォルダの中に入っている これら3つのファイルを エディターで開いてください そして これがそれらの ファイルを開いた状態です これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず index.html をブラウザで開いて 現状の地図の表示について 確認しておきましょう こちらの index.html をブラウザで開きます するとこのように表示されてきましたね 今回は地図の中心地を東京駅に設定していて ズームレベルを 15 というふうに 設定しています それではこちらの地図を使って マップタイプを 変更していってみたいと思います それではエディターに戻ります そして javascript.js を 開いてください するとこのように記述されていますね 今回注目したいところが 変数「 mapOptions 」の中の 「 mapTypeId 」という項目です 現在こちらには「 google.maps .MapTypeId.ROADMAP, 」と記述されています この「 ROADMAP 」というのは 先ほどブラウザで確認した 通常の地図ですね それでは こちらの「 ROADMAP 」 の部分を他の値に書き換えて 別の地図タイプ マップタイプを 表示してみたいと思います まずは 航空写真を 表示させてみたいと思います こちらの「 ROADMAP 」という部分を 消してこのように書きます すべて大文字で「 SATELLITE 」と 書きます そしてこの状態で javascript.js を保存します そして「 index.html 」を ブラウザで開いてみましょう するとこのように航空写真で 表示されてきましたね それではエディターに戻ります それでは次に先ほどの道路マップ デフォルトの地図ですね それとこちらの航空写真を合体させた ような地図を表示させてみたいと思います では こちらの「 SATELLITE 」の 部分を削除して このように書きます すべて大文字で「 HYBRID 」と書きます そして javascript.js を保存して index.html をブラウザで開きます するとこのように航空写真と道路地図が 合体したような地図が表示されてきますね それではエディターに戻ります それでは最後に地形情報に基づいた 地図を表示させてみたいと思います 同様にこちらの「 HYBRID 」の ところを削除して このようにすべて大文字で書きます このように「 TERRAIN 」と書きます そして同様にファイルを保存して 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宛までご連絡ください。