初めてのGoogle Maps API

地図を表示させる為のWebページの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Maps APIを利用して地図を表示させる為の準備として、地図を設置するWebページの作成について解説致します。
講師:
05:40

字幕

このレッスンでは Google Maps API を使って 地図機能を実装していくにあたり まずは 地図を表示するための ウェブページの作成方法について 解説いたします まずはダウンロードしてきたこちらの map.html というフォルダの中に入っている これら3つのファイルを エディタで開いてください そしてこれが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を すすめていきたいと思います それでは早速レッスンを始めていきましょう まずはこれら3つのファイルの 現状を確認しておきたいと思います まずこちらの index.html と こちらのstylesheet.css これら2つのファイルには 今回ご説明する ウェブページの HTML コーディングと スタイルシートのコーディングが 既に完了している状態となっています そしてもう1つの こちらの javascript.js こちらにはまだ何も書かれていない状態です では index.html に戻ります さてこの index.html には Google Maps API を使って 地図を表示するにあたって 必要最低限な HTML のコーディングが なされている状態となっています 順番に見ていきますと まずdiv id="content" という形で 大きな div 枠を作っていて その中にタイトルとして h1 タグを利用しています そしてその下には div id="map" ということで 実際に Google Maps API を 利用して 地図を表示するための枠を作っています そしてこちらの head タグの中で stylesheet.css を読み込んで こちらの style を定義しています さてここで一つポイントとなるのが こちらの div id="map" の この要素です この Google Maps API を利用して 地図を表示させる枠ですが 必ず横幅と縦幅を指定するように してあげてください 今回はこちらの sylesheet.css の中で この div#map のところで width: 800px と hight: 500px ― を指定してあげています もしこの横幅と縦幅の指定を 忘れてしまいますと 地図を表示させるときに 上手く表示されないことがありますので 注意してください それでは index.html に戻って 次のポイントについて見ていきたいと思います 次のポイントはこちらです この部分は Google Maps API を 利用するにあたって 必ず必要となる記述です これは何をしているかというと Google Maps API を利用するための JavaScript を Google のサイトから 読み込んでいる状態となっています この部分に関しては Google Maps API のウェブサイト上で その記述の方法が紹介されています 具体的にはこちらのサイト上の スタートガイドですね こちらの中の 「Google Maps API を読み込む」― というところですね こちらの中の この部分に記述されています この script タグの中で読み込まれている こちらの src(ソース)の中の このURL 部分ですが いくつかパラメータを含んでいます 一つ目は key というパラメータと もう一つは sensor というパラメータです key というところには 前回のレッスンでご紹介した API キーの値を埋め込むことができます これを埋め込むことで ウェブサイト上で Google Maps API を利用することが 可能になります そしてもう一つは sensor というパラメータです このパラメータには TRUE もしくは FALSE の値を入れることができるのですが TRUE を入れ込むことによって もしユーザーがスマートフォンといった― GPS などの位置情報を取得するような 機能を持った端末を利用しているとき その取得した位置情報を 利用することができます 逆に FALSE を入れ込んだ際には その機能は使わないといった 明示をすることになります それではエディタに戻ります 今回は PC 上で この Google Maps API の 機能の動作の確認をしていくため この API キーは不要でしたね そして sensor の値には false を入れています そしてその Google Maps API の 読み込みの後で jQuery を読み込んでいて 最後に javascript.js を 読み込んでいます 以降のレッスンで Google Maps API を JavaScript から利用していく際には この javascript.js の中に 記述していきますので 覚えておきましょう 以上でレッスンは終了です 今回は 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宛までご連絡ください。