jQuery APIでWebサイトを演出しよう

Google MAP APIで地図をカスタマイズ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Mapはデザインを細かくカスタマイズすることができます。スタイリッシュなデザインを実装してみましょう。
講師:
09:12

字幕

このレッスンではGoogle マップをサイトに埋め込む、そしてサイトのテイストに合わせてカスタマイズするという方法を学びます。まずは begin と final を見比べてみましょう。begin のフォルダーの中にあるcompany のフォルダーの中にあるindex.html をGoogle Chrome で開きます。そしてもう1つ。フォルダーに切り替えてfinal のフォルダーの中にあるcompany のフォルダーを開いてそうして index.html もGoogle Chrome で開きましょう。そしてまず begin の方のGoogle マップを見るとこれはいわゆる Google マップを検索してそこから埋め込みというものを選んでコピーペーストで作ったGoogle マップです。これでもちゃんとした住所が設定されていれば意味を成す状態になっています。final を見てみましょう。final の方ではこのように色味がサイトの緑色のカラーに合わせて設定されていてマーカーと呼ばれる目的地を表す画像がオリジナルの物に変更されています。また、こちらでは出ていた矢印やこういった地図の写真のボタンなどがこちらにはありません。 このように地図をカスタマイズする方法を学んでいきましょう。それではフォルダーに切り替えてbegin のフォルダーをSublime Text にドラッグアンドドロップしましょう。そうしたら company のフォルダーの中の index.html をダブルクリックして開きます。開いたら少しスクロールをしてGoogle マップが表示されている場所を探してみましょう。そうしますと115行目にアクセスマップという見出しがあってそこに div id="gmap" とあってその中に iframe という埋め込みのタグが入っているのでこちらを全部消してしまいましょう。iframe からsmall の閉じタグまでです。ここをごっそりと削って、gmap が空の div になっていることを確認します。それでは上書き保存をしておきましょう。当然ながらこれで地図は一旦見えなくなります。ここで JavaScript を使ってAPI を呼ぶ準備をしましょう。一番下のスクリプトが固まっているエリアにまず移動をします。そして colorbox などの下に改行を入れてここにスクリプトを呼んでいきたいと思います。それではブラウザーで検索をしてみましょう。 ブラウザーに切り替えて新規タブで検索をしましょう。google map apiそしてカタカナでスタートと入力をして検索をしてみます。検索をするとスタートガイドというのがでますので、こちらをクリックしましょう。クリックすると手順が書いてあってこのようにしていくとマップを使う準備ができるということになるのですが今回は API キーの取得を省略します。API キーは必須ではないのですがAPI キーを使うと利用状況などが使えたりします。このままスクロールをしてコードのサンプルがありますのでこの中の script type からこの閉じの script までをコピーしましょう。コピーをしたらSublime Text に戻ってcolorbox の下にペーストをします。そしてはてなという所があると思うのではてなの後ろを削っていきましょう。sensor そしてfalse は残します。ということで js?sensor=falseという所になればオッケーです。そしてこの後に用意してあるスクリプトがあるのでそちらを使いたいと思います。改行を一度入れてそして閉じのを先に書いておいてスクリプトの開始タグの内側にsrc= そして js フォルダーの中のgmap.js というのを用意してあります。 js/gmap.js を読み込みたいと思います。そして上書き保存をしておきましょう。それではこの状態でどうなっているかを見てみましょう。右クリックからOpen in Browser でChrome で確認をします。そうするとマップが表示されていると思いますがここは目的の仮の住所東京タワーではなくて全然違う場所になっています。また、色味も青に寄っていて少し色が合いません。この調整方法を学びます。まず Sublime Text に戻りましてcompany の中の js フォルダーにあるgmap.js をダブルクリックで開きます。開くと、このように沢山のコードがあるのですが実は1つ1つが分かり易い状態で固まっていてまず最初の2行が緯度と経度です。そしてマップオプションがどれくらいズームした状態なのかとかドラッグが有効なのかとか拡大縮小のツールバーを表示するかしないのか大抵はするの場合が true で表示しないの場合はfalse にしてあげれば何らかの変化がマップ内に起きます。また、icon-gmap という所はアイコンの画像を用意しておけば表示ができるということになります。そしてこちらにあるラベルやsaturation などは色味やどの道路やどのマップの地域名を表示するかといった所まで細かくカスタマイズが可能です。 こちらは先程のデベロッパーズガイドに詳しく掲載があります。まずは位置、緯度と経度を修正しておきましょう。それではブラウザーを開いて検索で東京タワーと調べます。そうしたらこちらの説明文に地図情報ありますね。そして地図をクリックしましょう。そしてこのマーカーの上で右クリックをすると「この場所について」という所があるので「この場所について」をクリックします。そうすると「この場所について」をクリックしたらここに緯度と経度が現れます。なのでこちらの 35 で始まる方をコピーしてSublime Text のlatitude の方に入れます。そして Chrome の方の139 で始まるをコピーしてこちらの 139 で始まる部分にペーストをします。そして上書き保存をしてブラウザーで先程の begin のファイルを更新するとなんと、このように東京タワー前の地図にきました。今度は色味の調整です。Sublime Text に戻ったらhue という所があります。こちらに色の番号が入っていますね。色の番号をこのサイトのメインカラーに変えてあげましょう。009b72 としました。そして上書き保存をしてブラウザーに切り替えて更新を押すと、このようにメインカラーにあった状態で地図がカラーリングされました。 こういった API の機能とオプションを組み合わせてGoogle マップをうまくサイトに馴染ませるといった事にチャレンジしてみましょう。このレッスンではGoogle マップ API のカスタマイズについて学びました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

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

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

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

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