SHOEISHA iD

See More

パスワードを忘れた場合はこちら

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

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

EnterpriseZine編集部

中野 佑輔（編集部）

近藤 佑子（編集部）

水無瀬 あずさ

CodeZine編集部
イベント
イベント

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

講演資料・動画まとめページ

Developers Summit 2026・Dev x PM Day 講演資料まとめ

Developers Boost 2025 講演資料まとめ

Developers X Summit 2025 講演資料まとめ

Developers Summit 2025 FUKUOKA 講演関連資料まとめ

Developers Summit 2025 KANSAI 講演関連資料まとめ

Developers Summit 2025 Summer 講演資料まとめ

翔泳社では、「独習」「徹底入門」「スラスラわかる」「絵で見てわかる」「一年生」などの人気シリーズをはじめ、言語や開発手法、最新技術を解説した書籍を多数手がけています。プロジェクトマネジメントやチームビルティングといった管理職向けの書籍も豊富です。

ITエンジニアとしてのスキルアップ・リスキリングに、ぜひお役立てください。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
jQuery UI／プラグインの活用

Googleマップを手軽に利用する定番プラグイン「gmap3」

「jQuery プラグイン」の利用（25）

ダウンロード サンプルファイル (139.7 KB)

　本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。前回は世界地図と日本地図を表示するプラグイン2種を取り上げましたが、今回はもっと狭い範囲で特定の場所（地点）の情報を表示するのに便利な、GoogleマップをWebページに表示するjQueryプラグインを取り上げます。

はじめに

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

　前回は世界地図を表示するjQuery Vector Maps（JQVMap）と、日本地図を表示するJapan Mapの、2種類のjQueryプラグインを取り上げました。これらは国・地域や都道府県といった単位で利用者に情報を表示したり、利用者に選択させたりする用途に便利に利用できます。

　一方で世界地図や日本地図といった広範囲の地図は、より狭い場所（地点）に着目して情報を表示する用途には向いていません。例えば以下のような用途には道路・建物のレベルで細かく情報を表示できるGoogleマップが便利です。

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

　そこで今回は、Googleマップを簡易に利用できるjquery.gmap3プラグインを取り上げ、紹介していきます。このプラグインは内部的にGoogleマップを利用するAPI（Google Maps API V3）を利用していますが、プラグインを利用することでよりシンプルにコードを記述することができます。

対象読者

  • オススメスポットをインタラクティブな地図で紹介したい方
  • Googleマップを使いたいがAPIを意識したくない方

必要な環境

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

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

  • Windows 7 64bit版
    • Internet Explorer 11

地名を指定するときに効果を発揮

　jquery.gmap3は、Googleマップを表示するjQueryプラグインです。GitHubからMITライセンスで配布されています。ダウンロードファイルに含まれるJavaScriptファイル（jquery.gmap3.js）を参照するようHTMLファイルに記述します。

　jquery.gmap3で東京周辺の地図を表示する例をリスト1に示します。

リスト1　jquery.gmap3のシンプルな利用法（001_gmap3_1.html） 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<!-- Google Maps APIの読込 ... （1） -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<!-- jQueryの読込 -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- gmap3の読込 ... （2） -->
<script type="text/javascript" src="js/gmap3/jquery.gmap3.js"></script>

<script>
    $(function() {
        $("#gmap3_1").gmap3({  // 地図の表示 ... （3）
            latitude: 35.6988,
            longitude: 139.7747,
            zoom: 8,
            navigationControl: true,
            mapTypeControl: true,
            scaleControl: true
        });
    });
</script>

<title>gmap3サンプル1</title>
</head>
<body>
    <h1>gmap3サンプル1</h1>
    <!-- 地図を表示する要素 ... （4） -->
    <div id="gmap3_1" style="width:640px;height:480px"></div>
</body>
</html>

　まず（1）でGoogle Maps APIのJavaScriptを読み込んだ後、jQueryとプラグイン（2）を読み込みます。地図を表示する要素（4）に対してgmap3メソッドで地図を表示します（3）。

　リスト1を実行するとGoogleマップで東京近辺の地図が表示されます。

図1　jquery.gmap3プラグインでGoogleマップを表示（001_gmap3_1.html）
図1　jquery.gmap3プラグインでGoogleマップを表示（001_gmap3_1.html）

　gmap3メソッドに指定する主なパラメータを表1に示します。addressとlatitude／longitudeはどちらかを必ず指定する必要があります（両方を指定するとaddressが優先）。

表1　jquery.gmap3の主なパラメータ
パラメータ名 内容 初期値
address 表示する住所・地名など なし（指定必須）
latitude 緯度 なし（指定必須）
longitude 経度 なし（指定必須）
zoom 縮尺 10
navigationControl 地図の操作部の表示・非表示 true
mapTypeControl 地図タイプ選択部の表示・非表示 true
scaleControl 縮尺の表示・非表示 true

　なおリスト1と同じ内容をjquery.gmap3プラグインを使わないで表示する場合、JavaScript部はリスト2のようになります。

リスト2　jquery.gmap3を使わずにリスト1と同じ地図を表示（002_nogmaps3_1.html） 
$(function() {
    // 地図を表示するオプション設定
    var options = {
        center: new google.maps.LatLng(35.6988, 139.7747),
        zoom: 8,
        navigationControl: true,
        mapTypeControl: true,
        scaleControl: true
    };
    // 地図を表示
    var map = new google.maps.Map($("#gmap3_1").get(0), options);
});

　リスト1やリスト2のように緯度・経度を直接指定する場合はプラグインの有無によりコード量に大きな違いがありませんが、緯度・経度の代わりに住所・地名を指定する場合は、住所・地名から緯度・経度を求める処理をjquery.jmap3プラグインが自動的に行うため、コードがよりシンプルになります。

　リスト3は地名「大阪」を指定してjquery.gmap3で地図を表示するコードです。

リスト3　jquery.gmap3を使って大阪の地図を表示（003_gmap3_2.html） 
$(function() {
    $("#gmap3_1").gmap3({
        address: "大阪",
        zoom: 8,
        navigationControl: true,
        mapTypeControl: true,
        scaleControl: true
    });
});
図2　jquery.gmap3プラグインで地名「大阪」を指定した例（003_gmap3_2.html）
図2　jquery.gmap3プラグインで地名「大阪」を指定した例（003_gmap3_2.html）

　リスト3・図2と同じ表示をプラグインなしで実装すると、リスト4のように住所・地名から緯度・経度を求める処理をGoogle Maps APIのジオコーディングサービスで明示的に行う必要があり、コード量が増えてしまいます。

リスト4　jquery.gmap3を使わずに大阪の地図を表示（004_nogmaps3_2.html） 
$(function() {
    // Geocoderで大阪の緯度・経度を取得
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({address:"大阪"}, function(results, status) {
        var location = results[0].geometry.location; // 取得できた緯度・経度
        var options = {
            center: location, // 取得できた緯度・経度を中央に設定
            zoom: 8,
            navigationControl: true,
            mapTypeControl: true,
            scaleControl: true
        };
        // 地図を表示
        var map = new google.maps.Map($("#gmap3_1").get(0), options);
    });
});

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

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

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます
  • ・翔泳社の本が買える！
    500円分のポイントをプレゼント

メールバックナンバー

次のページ
マーカーの表示を簡易に記述できる

NEXT

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

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

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

この著者の最近の執筆記事

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

この記事をシェア

CodeZine（コードジン）
https://codezine.jp/article/detail/8208 2014/10/24 14:00
" ); }

おすすめ

アクセスランキング

  1. 1
    なぜ内製化した業務アプリは現場定着しないのか──DXを失敗に追い込む「UI/UX」の軽視 NEW
  2. 2
    AIエージェントがコードを書く時代、EMに残される仕事とは？藤倉成太氏が描くエンジニア組織の変容 NEW
  3. 3
    脱・「スーパーマンに頼るエンジニア組織」──“強制的な遊び場”づくりから始める構造改革 NEW
  4. 4
    Claude CodeとDevinをFour Keysで検証——NTTドコモビジネスが3カ月のコーディングエージェント導入で得たデータと教訓
  5. 5
    コードを書くだけの時間は終わったのか。U35エンジニアが語る、AI時代を生き抜くための「越境」と「研鑽」
  1. 6
    「Notion 3.4」公開、新しいダッシュボードやプレゼンモードなど NEW
  2. 7
    大日本印刷・すかいらーくのエンジニアが、Jagu'e'rで得た成長の実感とコミュニティを「武器」にするまで NEW
  3. 8
    Cursor、セルフホスト型クラウドエージェントの一般提供を開始 NEW
  4. 9
    AWS、3月15日週に発表した新機能を紹介 NEW
  5. 10
    現在無料で提供されている注目のITエンジニア向け講座5選

アクセスランキング

  1. 1
    なぜ内製化した業務アプリは現場定着しないのか──DXを失敗に追い込む「UI/UX」の軽視 NEW
  2. 2
    AIエージェントがコードを書く時代、EMに残される仕事とは？藤倉成太氏が描くエンジニア組織の変容 NEW
  3. 3
    脱・「スーパーマンに頼るエンジニア組織」──“強制的な遊び場”づくりから始める構造改革 NEW
  4. 4
    Claude CodeとDevinをFour Keysで検証——NTTドコモビジネスが3カ月のコーディングエージェント導入で得たデータと教訓
  5. 5
    コードを書くだけの時間は終わったのか。U35エンジニアが語る、AI時代を生き抜くための「越境」と「研鑽」
  6. 6
    「Notion 3.4」公開、新しいダッシュボードやプレゼンモードなど NEW
  7. 7
    大日本印刷・すかいらーくのエンジニアが、Jagu'e'rで得た成長の実感とコミュニティを「武器」にするまで NEW
  8. 8
    Cursor、セルフホスト型クラウドエージェントの一般提供を開始 NEW
  9. 9
    AWS、3月15日週に発表した新機能を紹介 NEW
  10. 10
    現在無料で提供されている注目のITエンジニア向け講座5選
  1. 1
    GitHub CopilotがClaude Opus 4.1、GPT-5、GPT-5-Codexの非推奨を発表
  2. 2
    現在無料で提供されている注目のITエンジニア向け講座5選
  3. 3
    「REPL」　～マンガでプログラミング用語解説
  4. 4
    GitHub Copilot BusinessとProでClaudeとCodexが利用可能に
  5. 5
    Google Workspaceで直近発表された新機能をまとめて紹介
  6. 6
    NotebookLMに複数の新機能が追加、EPUBファイルの対応やビジュアル作成強化
  7. 7
    人間の強みは“論理の飛躍”!? 世界2位の競プロerに問う「AIとの戦い方」
  8. 8
    【AIエージェントの内部構造】長時間タスクを完遂させる「エージェントハーネス」の概要と設計・実装
  9. 9
    VSCodeでPHP開発環境を構築しよう
  10. 10
    Claude Skillsとは？ AIエージェント開発における新たなベストプラクティスをやさしく解説

イベント

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

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

メールバックナンバー

アクセスランキング

  1. 1
    なぜ内製化した業務アプリは現場定着しないのか──DXを失敗に追い込む「UI/UX」の軽視 NEW
  2. 2
    AIエージェントがコードを書く時代、EMに残される仕事とは？藤倉成太氏が描くエンジニア組織の変容 NEW
  3. 3
    脱・「スーパーマンに頼るエンジニア組織」──“強制的な遊び場”づくりから始める構造改革 NEW
  4. 4
    Claude CodeとDevinをFour Keysで検証——NTTドコモビジネスが3カ月のコーディングエージェント導入で得たデータと教訓
  5. 5
    コードを書くだけの時間は終わったのか。U35エンジニアが語る、AI時代を生き抜くための「越境」と「研鑽」
  1. 6
    「Notion 3.4」公開、新しいダッシュボードやプレゼンモードなど NEW
  2. 7
    大日本印刷・すかいらーくのエンジニアが、Jagu'e'rで得た成長の実感とコミュニティを「武器」にするまで NEW
  3. 8
    Cursor、セルフホスト型クラウドエージェントの一般提供を開始 NEW
  4. 9
    AWS、3月15日週に発表した新機能を紹介 NEW
  5. 10
    現在無料で提供されている注目のITエンジニア向け講座5選

アクセスランキング

  1. 1
    なぜ内製化した業務アプリは現場定着しないのか──DXを失敗に追い込む「UI/UX」の軽視 NEW
  2. 2
    AIエージェントがコードを書く時代、EMに残される仕事とは？藤倉成太氏が描くエンジニア組織の変容 NEW
  3. 3
    脱・「スーパーマンに頼るエンジニア組織」──“強制的な遊び場”づくりから始める構造改革 NEW
  4. 4
    Claude CodeとDevinをFour Keysで検証——NTTドコモビジネスが3カ月のコーディングエージェント導入で得たデータと教訓
  5. 5
    コードを書くだけの時間は終わったのか。U35エンジニアが語る、AI時代を生き抜くための「越境」と「研鑽」
  6. 6
    「Notion 3.4」公開、新しいダッシュボードやプレゼンモードなど NEW
  7. 7
    大日本印刷・すかいらーくのエンジニアが、Jagu'e'rで得た成長の実感とコミュニティを「武器」にするまで NEW
  8. 8
    Cursor、セルフホスト型クラウドエージェントの一般提供を開始 NEW
  9. 9
    AWS、3月15日週に発表した新機能を紹介 NEW
  10. 10
    現在無料で提供されている注目のITエンジニア向け講座5選
  1. 1
    GitHub CopilotがClaude Opus 4.1、GPT-5、GPT-5-Codexの非推奨を発表
  2. 2
    現在無料で提供されている注目のITエンジニア向け講座5選
  3. 3
    「REPL」　～マンガでプログラミング用語解説
  4. 4
    GitHub Copilot BusinessとProでClaudeとCodexが利用可能に
  5. 5
    Google Workspaceで直近発表された新機能をまとめて紹介
  6. 6
    NotebookLMに複数の新機能が追加、EPUBファイルの対応やビジュアル作成強化
  7. 7
    人間の強みは“論理の飛躍”!? 世界2位の競プロerに問う「AIとの戦い方」
  8. 8
    【AIエージェントの内部構造】長時間タスクを完遂させる「エージェントハーネス」の概要と設計・実装
  9. 9
    VSCodeでPHP開発環境を構築しよう
  10. 10
    Claude Skillsとは？ AIエージェント開発における新たなベストプラクティスをやさしく解説