Blog

Google Map APIでMapの表示とマーカーのコントロール

2015.08.04Cat:javascript jQuery デザイナー

Google Map APIを使うと、簡単にWebページ上にGoogleマップを表示することができるため、

Webページの制作に関わる方はよく利用する機会があると思います。

 

地図の中に目的地のマーカーを設置する場合もあると思います。

今回は、マップ外に目的地のリストを表示し、

目的のリンクをクリックした時に、

マップ内のマーカーの情報を表示するという処理が必要な場合の方法についてご紹介いたします。

 

↓こちらがそのDEMOです

DEMO

 

方法

手順

  1. HTML、CSSを準備してGoogleMapAPIを読み込み、APIの基本設定を行う
  2. マーカーの設定とマーカーの詳細の設定を行う
  3. マップ外の目的地リストをクリックしたときの設定を行う

 

1. HTML、CSSを準備してGoogleMapAPIを読み込む

HTML body内

CSS

HTML head内

HTMLでマップを表示する要素を配置し、CSSで表示を調整します。

その後、HTMLのhead内にGoogle Map APIの読み込みと、

表示のための記述を行います。

地図だけを表示するだけなら、上記のような記述でGoogle Mapを表示できます。

 

2. マーカーの設定とマーカーの詳細の設定を行う

続いて、GoogleMap上にマーカーを設置するための設定を行います。

今回は、複数のマーカーを設置する場合の方法についてご紹介いたします。

先ほどのHTML head内に記述したscriptを以下のように書き換えてください。

ここでのポイントは、後ほどマップの外部の要素からマップを操作するので、

マップに関連するオブジェクトをグローバルで予め定義しておくことです。

 

マーカーの設置は以下のコードで行っています。

今回は複数なので、配列により設定しています。

マーカーの情報は以下のコードで行っています。

こちらも同様に配列により設定しています

content: で記述した内容がマーカーの情報として表示されます。

style属性などを使うことで、自由にレイアウトできます。

 

追記 : 2015.08.28)

現在はマップがiframeではなく直接HTML上に描画されているので、

以下のようにclassをつければ、直接CSSでレイアウトできるようです。

 

 

最後に、マーカーをクリックしたときに対象のマーカーの情報を表示するための記述を行います。

クリックしたマーカーの場所の情報を取得し、一致したマーカーの詳細を表示し、

それ以外の詳細は閉じます。

 

3. マップ外の目的地リストをクリックしたときの設定を行う

以下の様な目的地のリストをマップ外に用意し、

どれかをクリックしたら、対象のマーカーの詳細を表示するようにします。

今回の方法では目的地のリストの<a>にdata-title属性を付け、

マーカーのtitleと一致した場合に詳細を表示するようにします。

以下のコードはjQueryを使っていますので、

jQueryの読み込みを事前に行ってください。

これで完了です。

 

参考サイト

Markers  |  Google Maps JavaScript API  |  Google Developers

Info Windows  |  Google Maps JavaScript API  |  Google Developers

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ