SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

世界地図/日本地図を作成する「jQuery Vector Maps/Japan Map」プラグイン

「jQuery プラグイン」の利用(24)

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回と次回の2回にわたり世界地図、日本地図、Googleマップといった地図をWebページに表示するjQueryプラグインを取り上げ、紹介していきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Googleマップに象徴されるように、Webページで地図を表示することは近年一般的に行われています。特に静的な画像ではなくJavaScriptで動的に描画される地図は、利用者がインタラクティブに操作を行って場所の情報を取得できるため、Webページの利便性を高める手段として有用です。

 そこで、JavaScriptの処理によりWebページ上に地図を表示するjQueryプラグインに着目し、以下3種類を紹介します。

  • (1)jQuery Vector Maps: 世界地図を表示
  • (2)Japan Map: 日本地図を表示
  • (3)jquery.gmap3: Googleマップを表示

 (1)(2)は世界地図/日本地図という大きな単位で地図を表示し、国・地域や都道府県といった単位で利用者に情報を表示したり、利用者に選択させたりする機能を備えており、例えば以下のような利用方法が考えられます。

  • 言語を意識せずに出身国・地域を選択できる入力フォーム
  • 地図にマウスカーソルを当てるとその都道府県の名物を表示する観光案内

 一方でGoogleマップそのものを表示する(3)は、特定の場所(地点)に着目して情報を表示する処理が得意で、以下のような利用方法が考えられます。

  • Wi-Fiスポットの場所と内容を地図上に表示
  • リストから支社を選ぶと地図で場所を表示する会社案内

 まず今回は(1)(2)を紹介します。(3)については次回紹介していきます。

対象読者

  • インタラクティブな世界地図・日本地図をWebページに表示させたい方
  • Webページに画像で地図を掲載するより一工夫したい方

必要な環境

 jQueryには1.x系と2.x系が存在し、2.x系はInternet Explorer 6~8との互換性を切り捨てることでコードサイズを縮小しています。今回は互換性を考慮して1.x系の最新版であるjQuery 1.11.1を使用します。

 今回は以下の環境で動作を確認しています。

  • Windows 7 64bit版
    • Internet Explorer 11

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
jQuery Vector Mapsで世界地図を表示

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8121 2014/10/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング