こんにちは。ウェブエンジニアのカミジョウです。
WordPressを中心に、Webサイト構築を行っています。

タナカラが提供する WordPress による「モクタツ」オーダーメイドWebサイトのシステム開発事例、第5回は 「APIを使った外部サービス連携」 についてご紹介します。

前回のコラムではAPIに似た機能をもつ、RSSを使って外部サイトの更新情報を自社サイトに自動表示する仕組みをご紹介しましたのでこちらも併せてどうぞ。

APIは、私たちが日常的に利用している多くのWebサービスの中で活用されています。
例えば、郵便番号を入力すると住所が自動で表示される機能は、日本郵便が提供するAPIによるものです。また、企業の会員サイトなどで利用されている「LINEでログイン」機能は、LINEの認証APIを活用しています。さらに、ECサイトでPayPayなどのキャッシュレス決済が利用できるのも、決済APIとの連携によって実現されています。

このようにAPIを活用することで、外部サービスの便利な機能を自社のWebサイトに取り入れることができます。

今回は、タナカラが制作した「長野県結婚・出産・子育て応援サイト チアフルながの」で実際に行っているGoogle Maps APIを使った地図表示についてご紹介します。

---

Google Maps API を使った地図表示

Google Maps と聞くと、「行きたい場所を検索したり、ルートを調べたりする地図サービス」を思い浮かべる方が多いかもしれません。
実際、Webサイトでも Google Maps のURLを貼ったり、埋め込み用コードを使って地図を表示しているケースはよく見られます。

埋め込み形式は、手軽に地図を表示できる便利な方法ですが、表示方法やデザインのカスタマイズなどには制限があります。

そこで、埋め込み形式とGoogle Maps APIでできること・できないことの違いを、表にまとめました。

　　

埋め込み用コードと Google Maps API の違い

項目	埋め込み形式	Google Maps API
地図の表示	埋め込み用の地図をそのまま表示	表示する位置や内容をWebサイト側で設定して表示
表示するピンの数	1か所のみ	複数
デザイン	変更できない	背景やピンなどを変更できる
表示範囲・ズーム	固定	自由
ピンをクリック	できない	ポップアップ形式で施設情報や画像、リンクなどを表示できる

それでは、APIを使った地図表示のポイントを3つあげます。

ポイント①：登録した施設情報のデータをもとに、1つの地図に複数のピンを自動表示

「チアフルながの」の「子ども連れで遊べる施設」は、施設情報を個別に登録しています。その際に入力する緯度・経度をもとに、マップには各施設の位置をピンで表示。マップページを開くと、複数のピンが表示された状態になります。
施設情報を追加した場合や緯度・経度を修正した場合は、自動的に最新の情報が反映されます。

ポイント②：地図の表示位置（中心・ズーム）の調整

長野県の広さを考慮して10地域に分けて地図を表示し、各地域ごとに中心位置とズームレベルを調整しています。
これにより、訪問者がマップページを開いた際に、必要な施設が見やすくまとまった状態で表示され、使いやすさと利便性が向上しています。

ポイント③：ピンをクリックすると詳細情報を表示

ピンをクリックすると、施設名・住所などの情報をポップアップで表示し、詳細ページへのリンクも設置しています。
地図を見ながら施設の情報を確認し、そのまま詳細ページへ移動できる導線を実現しています。

---

今回の内容以外にも、Google Maps API では、さまざまなカスタマイズが可能です。
例えば、地図の配色や背景デザインをWebサイトの雰囲気に合わせて変更したり、オリジナルのピン画像を使って施設を表示したりすることができます。
また、近接した複数のピンをまとめて表示する「クラスタ表示」によって、施設数が多い場合でも、視認性の高い地図を実現できます。
さらに、検索や絞り込みの条件に応じて表示内容を切り替えるなど、Webサイトの機能と連動した地図表示も可能になります。
このように Google Maps API を利用することで、単なる地図表示にとどまらず、Webサイトの目的に合わせた柔軟な表現を実現できます。

通常の背景・配色からカスタマイズ

地図を広域にするとアイコンがまとまる（クラスタ表示）

---

まとめ

APIは、外部サービスと連携し、サイトの動きや利用状況に応じて、情報の取得や処理を柔軟に制御できる仕組みです。
Google Maps API のように、外部サービスが持つ機能やデータを単に利用するだけでなく、サイトの目的に合わせて組み合わせ、表現を最適化できる点が大きな特長です。
目的や規模に応じて活用することで、Webサイトの表現や機能の幅は大きく広がります。
WordPress 上での API 連携やカスタマイズについては、ぜひタナカラまでご相談ください。