ホームページの作成・作り方

【Google Maps API】複数のマーカーを表示して、リンクをつける方法

この記事では、Google Maps APIを使った、地図の表示方法をお伝えしています。
具体的には、以下のようなことができます。

  • 複数の建物をマーカーで表示
  • マーカーにマウスオーバーで建物名表示
  • マーカーをクリックで簡単な情報表示
  • 表示した情報から、建物のページへのリンク

[speech_bubble type=”rtail” subtype=”L1″ icon=”hamuo.jpg” name=”はむお”]
これは、不動産の管理で、特定の地域のアパート・マンション情報を地図で検索できるようにしたい、という要望から作りました。[/speech_bubble]

  • 不動産関係のサイト
  • 複数店舗を経営していて一覧で表示したい
  • 地域の情報を発信したい

などにお使いいただけます。

【Google Maps API】コピペOK!実際のコードを公開

まずは先に、実際のコードをご紹介します。
コピペOKですので、そのままお使いいただけます。

実際に作った地図検索はこちら

簡単な解説|複数のマーカーを設置する

「マーカーを準備」があるので、ここに表示したい情報を入れていきます。

必要なものは以下の4つです。

  • 建物名
  • 緯度
  • 経度
  • 表示したいコンテンツ

この順番に、コンマで区切っていれていきます。

緯度経度に関しては、以下のサイトで調べるのが便利です。

住所から緯度経度を調べる

「表示したいコンテンツ」にはHTMLも入力できるので、リンクも画像も貼れます。

次にマーカーの数を増やしていきましょう。

この部分の「markers」を増やしていけば大丈夫です。
数字は必ず「0」から始めるようにします。

リンクをつける

マーカーを準備する際に、「表示したいコンテンツ」の部分にリンクを準備します。

#の部分にはリンクしたいURLを入力しましょう。
アンカーテキストは表示する内容です。

よくあるのは「詳細はこちら」とか「クリック」とかですね。

Google Maps APIはどんな時に使うか?

今回の方法は、以下のような状況の時におすすめです。

  • 特定の建物だけを複数表示したい
  • マーカーから詳細ページへリンクしたい
  • マーカーにマウスオーバーで好きな情報を表示させたい

地図を表示するだけなら、GoogleMapから貼り付けたほうが断然早いし楽です。
状況に合わせて、適切な方法を選んでいきましょう。

この記事が役に立ったら
いいね ! をお願いします