初めてのGoogle Maps API

マーカーの作成と地図上への配置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
地図上の目印となるマーカーを作成し、それを任意の位置に配置する方法について解説致します。
講師:
05:14

字幕

このレッスンでは Google Maps API を使って ウェブページ上の地図の任意の位置に マーカーを作成して 表示する方法について解説いたします まずはダウンロードしてきたこちらの marker_show というフォルダの中に入っている これら3つのファイルを エディタで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います 早速レッスンを始めていきましょう それでは javascript.js を エディタで開いてみます すると現状このようになっていますね 今回解説する部分は こちらの部分となります この部分では既にマーカーの作成の プログラムが書かれている状態となっています これを順に目で確認しながら どのようにマーカーを作成しているか 確認していきたいと思います 現状の地図は東京スカイツリーを 地図の中心に持ってきています こちらの部分が スカイツリーの緯度 経度となっています それを変数 スカイツリーに格納して こちらの mapOptions という変数の中の center の値にその skytree の変数を 当てはめていますね そして zoom レベルを 16 に設定しています 今回はこの skytree に マーカーを作成して設置してみたいと思います マーカーの作成はこの部分ですね それではマーカーがどのように 作成されているか見ていきます まずは変数 (var) を定義して その変数の名前を marker としています そして = new google.maps.Marker と書いて 括弧( ) そして波括弧 { } で囲っています この { } の中で このマーカーの設定情報を記述します まずこちらの position で マーカーを設定する緯度経度を指定します 今回は地図の中心と同じ skytree にマーカーを落としたいので こちらも同様に変数 skytree を 当てはめています そして次に map という値の中に 同じく変数 map というものを 入れています この変数 map というのは こちらのマップの生成のときに利用した こちらの変数ですね これを map という 項目の中に当てはめています こうすることによって この変数 map が表す地図の上に このマーカーを設置することができます そして最後にこちらのマーカーの title を指定しています 今回は "東京スカイツリー" としています それではこの状態で 一度ブラウザで index.html を開いて どのように見えるか 確認してみたいと思います こちらの index.html を ブラウザで開きます するとこのように地図が表示されて 真ん中のスカイツリーの所に 赤いマーカーが設置されていますね このように表示されてくれば きちんとマーカーの設定が できているという形になります それではエディタに戻ります 今 作成したマーカーを 地図上に設置する方法として こちらのマーカーの設定項目の中に map という項目を作って その中に設置したい map の変数を 置いていましたね 実はもう1つマーカーを 地図上に設置する方法があります それはこのように書いていきます この下にまずは 設置したいマーカーの変数を書きます 今回はこちらで作成したマーカーですね これを書きます marker と書いてその後に .(ドット) そして setMap と書いて ( ) ; と書きます そしてこの setMap の ( ) の中 引数ですね ここに設置したい map の変数を書きます ここでは そのまま map ですね そして上記の この部分で設定した この map の項目は削除してしまいます そして index.html をブラウザで開いて こちらも同様に マーカーが設置されているかどうか 確認してみたいと思います こちらの index.html をブラウザで開きます すると同じように マーカーが表示されてきましたね こういった方法で マーカーを設置することも可能です それではエディタに戻ります 以上でレッスンは終了です 今回は Google Maps API を使って 地図上の任意の位置にマーカーを 設置する方法について解説しました 以降のレッスンでは 今回のレッスンとは逆に 地図上に設置したマーカーを 削除する方法について解説していきますので そちらも合わせてご覧ください

初めてのGoogle Maps API

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

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

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

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

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