初めてのGoogle Maps API

マーカーアイコンの変更

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
地図上に配置するマーカーのアイコンを変更する方法について解説致します。
講師:
03:43

字幕

このレッスンでは Google Maps API を使って 地図上に設置したマーカーを 自分の好きな画像に 変更する方法について解説します まず ダウンロードしてきた こちらの maker_icon という― フォルダの中に入っている HTML ファイルと JavaScript ファイル そして CSS ファイルを エディタで開いて下さい これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは早速 レッスンを始めていきましょう Google Maps API を使って 地図上にマーカーを設置する時 そのマーカーのデザインは 通常 赤いシンプルなピンの様なものになります ただ このマーカーの画像は 自分の好きなものに変えることができます それでは そのマーカーの画像の 変更の仕方について見ていきたいと思います まずは javascript.js を エディタで開きます すると 現状はこの様な形になっています 今回 確認する部分は こちらの部分とこちらの部分となります まず 現状の地図の確認ですが 前回のレッスンから引き続き 東京スカイツリーを中心に持ってきて ズームレベルを 16 と設定した地図を 作成しています そして そのスカイツリーの部分に マーカーを1つ落としています 今回は そのスカイツリーの所を指している マーカーの画像を変更してみたいと思います 変更する画像は 同じくダウンロードしてきた ファイルの中に入っている― こちらの blue_maker.png を利用します それでは エディタに目を移して まずは そのマーカーの画像を 変数に入れてあげます var の変数の名前を 今回は marker_icon としています そして = と書いて この部分に そのマーカー画像へのパスを書きます そして この変数 marker_icon を こちらのマーカーを作成している中の 設定項目に この様に icon: という項目を追加して その値に先ほど作成した― marker_icon という変数を入れ込んでいます こうすることによって マーカーの画像を 自分の好きな画像に変更できるわけです それでは index.html をブラウザで開いて 実際にどのように見えるかを 確認してみたいと思います こちらの index.html をブラウザで開きます すると この様に デフォルトでは赤いマーカーだったのが 今回 自分で用意した この青いピンの様なマーカーの画像に 変更することができています もちろん この画像のデザインは 自分で好きなように作成できるので 今回ですと 例えば スカイツリーの様なアイコンを作って ここに表示させてもおもしろいですね それでは エディタに戻ります 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に設置したマーカーのアイコンを 自分好みの画像に変更する方法について 解説いたしました 以降のレッスンでは 地図上に情報ウィンドウを作成して 表示する方法について解説していきますので そちらも合わせてご覧ください

初めてのGoogle Maps API

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

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

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

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

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