初めてのGoogle Maps API

基本的な地図の表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Maps APIを利用して、Webページに基本的な地図を設置する方法について解説致します。
講師:
05:53

字幕

このレッスンでは Google Maps API を使って Web ページ上に基本的な地図を 表示する方法について解説いたします まずは ダウンロードしてきた map_show というフォルダの中に入っている これら3つのファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう 今回はこちらの div id="map" の この要素の中に Google Maps API を利用して 基本的な地図を表示させてみたいと思います ではエディタで javascript.js を開きます すると このように 今回ご説明する マップの作成とマップの表示についての JavaScript の記述が 完了している状態となっているのが 分かりますね 今回は これを順に目で追いながら どのようにマップを表示しているのか 確認していきたいと思います まずは こちらの function initialize () { という ユーザー定義関数ですね この initialize という ユーザー定義関数の中では 具体的にマップを生成するための プログラムが記述されています そして このユーザー定義関数 initialize の下に このように このユーザー定義関数を呼び出して この地図を表示させる プログラムを走らせています それでは具体的に こちらの initialize の中に書かれている― 地図を表示させるプログラムについて 見ていきたいと思います まずは変数を定義していますね そして変数の名前は mapOptions としています この変数はマップを生成する際の 様々な設定値を定義するためのもので オブジェクトとして生成されています それでは内容を見ていってみましょう まず center という キーの値には new google.maps.LatLng という記述がなされていて その中に緯度と経度の記述がされています この center の値に 緯度経度を指定した― google.maps.LatLng というのを書いてあげることによって 「ここで指定した緯度経度を地図の 中心とする」という意味合いになります そして その次の mapTypeId というキーの中の値には その地図の種類を指定してあげています 今回は ROADMAP という地図の 種類にしています そして こちらの zoom という キーの値には 数値で5 と入れていますね こちらは地図のズームレベルを 指定してあげています そして ここまで地図のオプションの 定義が完了したら 次は このオプションの定義に従って 地図を生成してあげます まずは変数を作っています そして 変数の名前は map としています そして その後に new google.maps.Map というのが続いて そして この ( ) の中に 2つの引数を指定しています まず1つ目の引数には document.getElementById("map") ということで HTML 上の地図を表示したい要素を 指定してあげています 要するに こちらの index.html のこの部分です これを指定してあげています そして 2つ目の引数 こちらの引数には 先ほど設定した変数 mapOptions というものを指定しています こうすることによって 「先ほど定義した こちらの地図のオプション この設定を今回生成する地図に 適用する」という意味になります 以上で 基本的な地図を表示するための プログラムの実装は完了です 思いの外 簡単でしたね それでは 実際に こちらの index.html を ブラウザで開いて確認してみたいと思います こちらのファイルですね 今回 確認に利用するブラウザは Chrome ブラウザを利用します それでは開いてみます すると このように 日本列島が表示された地図が 表示されてきましたね このように表示されてくれば きちんと Google Maps API と JavaScript の記述ができている といったかたちになります それではエディタに戻ります 最後に1つポイントがあります こちらの「マップ作成」と「マップ表示」の プログラムを囲っているこちらの $(function( ) { }); この部分ですね この $(function( ) { }); の部分で この「マップ作成」と「マップ表示」の部分を 囲ってあげることによって 「HTML のドキュメントの準備が完了したら こちらの処理を走らせる」 という意味になります もし こういった記述をしていないと 正常にGoogle Map が表示されない場合が ありますので注意してください 以上でレッスンは終了です 今回は Google Maps API を使って Web ページ上に基本的な地図を 表示させる方法について解説いたしました 以降のレッスンでは Web ページ上に表示した地図の ズームレベルを設定する方法について 解説していきますので そちらも合わせてご覧ください

初めてのGoogle Maps API

このコースではGoogle Maps APIをJavaScriptとjQueryを利用してサイトに実装する方法について学習します。これらについての基本的な説明から、地図の表示方法や設置した地図上にマーカーや情報ウィンドウを設置する方法までを丁寧に解説します。このコースをマスターすれば、さまざまな用途に応じた地図をサイト上に作成できるようになります。

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

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

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

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