初めてのGoogle Maps API

取得した緯度経度への地図の移動

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Maps APIを使って、住所から取得した緯度経度の位置に、地図を移動させる方法について解説致します。
講師:
05:04

字幕

このレッスンでは これまでのレッスンで 取得した緯度経度を使って ウェブページ上の地図の表示をその地点まで 移動させる方法について解説いたします まずはダウンロードしてきたこちらの 「 geocoding_map 」という フォルダの中に入っている これら3つのファイルを エディターで開いてください そして これがそれらの ファイルを開いた状態です これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず 「 javascript.js 」を エディターで開いて確認してみましょう 前回のレッスンではこの javascript.js の ファイルの中で 入力された住所や地名に基づいて ajax を使って緯度経度を 取得してくるところまで実装いたしました それが こちらの部分ですね 取得してきた緯度経度を変数の 「 lat 」と「 lng 」に 代入しています 今回はこの緯度経度が格納された変数 「 lat 」と「 lng 」を使って ウェブページ上に表示されている グーグルマップの表示を その緯度経度のポイントに移動させて 表示するところを実装していきたいと思います その処理をしているのが こちらの部分となります では 順番に見ていきたいと思います まずはこちらの部分 この部分では 変数「 newLatLng 」というものを 新たに作成して その中に「 new google.maps .LatLng(); 」として その引数「 (lat,lng) 」 要するに先ほど緯度経度を代入した変数ですね この「 lat 」と「 lng 」を この引数の中に入れこんでいます こうすることによって Google Maps で 利用できる緯度経度のデータを こちらの「 newLatLng 」 という変数の中に格納することができました そして次にその緯度経度の地点に 地図の表示を移動させる方法についてです それはこちらの部分となります まずはこのように 「 map.setZoom(); 」 と書いてその括弧の中の引数に 「16」としています このマップは表示されている地図が 格納されている変数ですね このマップの「 setZoom 」と することで そのズームレベルを動的に 変更することができます 今回はそのズームレベルを 「16」にして 少しズームアップさせるような形で 表示させていきます そして 同じく変数 「 map.setCenter();」 そしてその中に先ほど作成したこちらの変数 「 newLatLng 」 この変数の中には Google Maps で利用できる緯度経度のデータが 入っている状態ですね それをこちらの引数に入れこんであげます こうすることによって この変数 「 map 」の中に入っている 地図の表示する中心地を この「 newLatLng 」の中に 入っている緯度経度の地点に 変更することができます それでは この状態で 「 index.html 」を ブラウザで開いてみましょう こちらのファイルをブラウザで開きます するとこのように表示されましたね それでは この部分に地名や住所を 入力してみたいと思います ここでは そうですね 例えば「大阪駅」と入れてみましょうか そして 「移動」ボタンを押します すると このように大阪駅が地図の中心に来て 少しズームアップされた状態で 表示されていますね このように表示されれば Google Maps API の geocoding 機能を使った 地図の移動の実装は完了となります ちなみにこれは日本国内だけではなく 海外の住所も指定することができます 例えばここに「ニューヨーク」と 入れてみましょうか そして「移動」ボタンを押します するとこのように表示されましたね 少しズームレベルを下げてみましょうか するとこのようにニューヨークが 地図の中心に表示されているのが分かりますね それではエディターに戻ります 以上でレッスンは終了です 今回は緯度経度から表示中の地図を その地点に移動させる方法について 解説いたしました このレッスンをもって 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宛までご連絡ください。