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

Google MAPを埋め込む

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グローバル対応で、動きも柔軟なGoogle Mapを埋め込む方法を学びましょう。
講師:
04:50

字幕

このレッスンではGoogle マップ API を使ったGoogle マップの表示を試してみます。それではまず final のフォルダーの中を開いてcompany のフォルダーを開いてcompany の中の index.html をGoogle Chrome で開きます。開いたらスクロールをして地図が出ていると思います。今回は架空の住所として東京タワーを指定しています。なので住所はこの東京都港区芝公園4丁目2-8という所が住所になっています。そしてこの地図のデータは自分で用意することはとても大変ですがGoogle のマップの機能を使って埋め込むというやり方を使えばすぐに実装することができます。ではやり方を紹介します。まずはこの所在地の住所をコピーします。コピーしたら新規タブなどで検索をしましょう。このように住所をそのまま検索にかけるとその住所の場所がGoogle で検索すれば出ると思います。こちらのマップのエリアを一度クリックをするとこのようにマップ表示で表示ができると思いますがここの中の鎖のマーク。左上にあります。この鎖のマークを押すと埋め込み用の HTML コードという表示があります。 また「埋め込み地図のカスタマイズとプレビュー」というものを押すとこういった小窓が開いて幅や高さそして地図のサイズなどを変更することも可能です。今回はこのカスタマイズを扱わずに、この iframe という下の欄の項目を全部選択をしましょう。Mac の方は Command+AWindows の方は Ctrl+A で全選択ができるのでその後にコピーをしてからペーストをするファイルを開きましょう。フォルダーに戻ってbegin のフォルダーをフォルダーごとSublime Text に落とします。そして company の中のindex.html をダブルクリックで開いておきましょう。開いたらスクロールをします。スクロールをすると、アクセスマップという所が114行目にあります。そこに div id="gmap" という空の div があるのでその空の div の内側、閉じ div の内側にスペースを取ってそしてペーストをしましょう。そうするとこのように長いコードが入ると思います。そしてよくこの width とかを見てみると数値がいじれそうですね。なのでこの 425 を例えばこのサイトの横幅である 640 とそして高さも 400 ぐらいに打ち変えて上書き保存をしてそして右クリックから Open inBrowser で確認をしてみましょう。 確認をすると、スクロールをしたらこのように地図が表示されていることが分かります。そしてこの大きな地図で見るというのもソース上に書いてありましてクリックをするとマップが開くというようになっています。また Sublime Text に戻りましょう。一見長いコードに見えますがちゃんとエリアを分けて考えるとこの iframe という所からbr 改行があって、そして「大きな地図で見る」は独立してこうなっているのでもしも大きな地図で見るリンクがいらない場合はこの small タグと改行を取ってしまえばもっとシンプルな見た目になりますね。また、この長い URL ですがその中にも例えば z=14 とか緯度と経度とかそういった情報が含まれていますのでこちらをより細かく設定するにはAPI を使ってカスタマイズをして行きたいと思います。このレッスンではまず Google マップをサイトに埋め込むということを学びました。

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

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

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

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

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

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