SHOEISHA iD

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

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

jQuery UI/プラグインの活用

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

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

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

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

 マップにマーカーを設定する場合は、markersパラメータをリスト5のように設定します。

リスト5 マーカーの設定(005_gmap3_3.html)
markers: [
    {
        latitude: 43.06255844743664,
        longitude: 141.35365694760856,
        title: "札幌時計台",
        content: "<div><h4>札幌時計台</h4><p>意外としょぼい</p></div>"
    },
    {
        address: "北海道札幌市中央区北3条西6丁目",
        title: "北海道庁",
        icon: "img/icon_star.png",
        content: "<div><h4>北海道庁</h4><p>いわゆる赤レンガです</p></div>",
        openInfo: true
    }
]

 マーカーに指定できるパラメータは表2のとおりです。addressとlatitude/longitudeはどちらかを必ず指定する必要があります(両方を指定するとaddressが優先)。

表2 マーカーに指定できるパラメータ
パラメータ名 内容 初期値
address 表示する住所・地名など なし(指定必須)
latitude 緯度 なし(指定必須)
longitude 経度 なし(指定必須)
title タイトル 空文字
content 吹き出し内のHTML要素 空文字(吹き出しなし)
icon アイコン画像ファイル 指定なし(デフォルトアイコン)
openInfo 吹き出しを自動で開く false

 リスト5の指定を行うと、図3のように地図にマーカーが表示されます。

図3 マーカーが表示される(005_gmap3_3.html)
図3 マーカーが表示される(005_gmap3_3.html)

 動的にマーカーを追加する場合はaddMarkerメソッド、マーカーを全て削除する場合はremoveAllMarkersメソッドが利用できます。

リスト6 マーカーの追加と削除(005_gmap3_3.html)
// マーカーの追加
$("#markerAdd").click(function(){
    $.gmap3.addMarker($("#gmap3_1"), {
          latitude: 43.060975033796325,
          longitude: 141.35523945092734,
          title: "大通公園",
          content: "<div><h4>大通公園</h4><p>道民憩いの場</p></div>"
    });
});
// マーカーの削除
$("#markerClear").click(function(){
    $.gmap3.removeAllMarkers($("#gmap3_1"));
});

 なおリスト5、リスト6と同じことをプラグインなしで実現するコードをサンプルコード(006_nogmap3_3.html)に添付しています。リスト5に相当する内容はリスト7のようになり、ジオコーディングサービスやマーカーに表示するInfoWindow(吹き出し)、マウスクリックのイベント処理を自分で実装する必要があります。

リスト7 リスト5と等価なプラグインなしの実装(006_nogmap3_3.html)
// markerを追加
var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(43.06255844743664, 141.35365694760856),
    map: map,
    title: "札幌時計台"
});
// markerに表示するInfoWindow(吹き出し)
var infoWindow1 = new google.maps.InfoWindow({
    content: "<div><h4>札幌時計台</h4><p>意外としょぼい</p></div>"
});
// markerクリック時に吹き出しを表示
google.maps.event.addListener(marker1, "click", function() {
    infoWindow1.open(map, marker1);
});
// markerを配列に保持
arrayMarkers.push(marker1);

// 2個めのmarkerはgeocoderを用いて住所から緯度・経度を取得
geocoder.geocode({address:"北海道札幌市中央区北3条西6丁目"}, function(results,status) {
    var location = results[0].geometry.location;
    var marker2 = new google.maps.Marker({
        position: location,
        map: map,
        title: "北海道庁",
        icon: "img/icon_star.png",
    });
    var infoWindow2 = new google.maps.InfoWindow({
        content: "<div><h4>北海道庁</h4><p>いわゆる赤レンガです</p></div>"
    });
    google.maps.event.addListener(marker2, "click", function() {
        infoWindow2.open(map, marker2);
    });
    google.maps.event.trigger(marker2, "click");

    arrayMarkers.push(marker2);
});

次のページ
地図の移動も地名指定が便利

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

  • 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 Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング