[jQuery] 埋め込んだGoogleマップのマッピングアイコンをカスタマイズする

投稿日:2013年12月24日
ホームページに地図を設定したい時ありますよね。
よく使われるのがGoogleマップを埋め込む方法です。
地図を表示させたい目的は、たいてい、ある特定の地点(例えば会社の場所)を指し示すためであり、
マーカーを置くのはほぼ必須となります。
そしてマーカーをクリックした時に何らかの動作をさせたい時も出てくると思います。

今回は、埋め込みGoogleマップでのマーカーを、標準マーカーからカスタマイズする方法について取り上げたいと思います。

クリックした時に、何か動作させることもできます。


標準的な埋め込み方法:
Googleマップで表示させたい場所・縮尺にしてから、
左上にあるリンクボタンを押し、「ウェブサイトへの埋め込み用HTMLコード」をコピー&ペーストします。
これは iframe を利用しているので、手を加える要素が限られてきます。


柔軟に加工したい場合は、Google Maps API と jQuery を用いて行う方が良いと思います。
以下に流れを書いていきます。

1.基本のマップ表示:

mapOptions にオプションを指定することにより、いろいろカスタマイズできます。
例えば、ズームボタンやスクロールボタン等のユーザーインターフェースをなくしたり、
ダブルクリックでズームできないようにしたり。
詳しくは公式ドキュメント(英語)をご覧ください。


2.アイコンの設置:


3.クリックイベントの登録:

クリックした時に、何か動作させることもできます。

南本貴之

関連記事

カテゴリー: JavaScript, jQuery, WEB, サイト制作
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル
社内写真