GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法

公開日: : 最終更新日:2014/05/05 JavaScript , , , ,

GoogleMaps API(v3) を使って地図上に表示されている Marker を非表示にする方法と、非表示になっている Marker を表示する方法についてです。

すでに地図上に表示されている Marker を扱う方法なので、 Marker を新しく作成する方法ではないことにご注意ください。
同様に「非表示」であって「削除」ではないことにもご注意ください。

icatch-disappear_7186028511_mini

photo credit: Diana Mehrez via photopin cc

目次

1. Marker を非表示にする・表示する

Marker の非表示・表示は、google.maps.Marker#setVisible メソッドを使って操作します。

  • google.maps.Marker#setVisible(false) → 表示されている Marker を非表示にする
  • google.maps.Marker#setVisible(true) → 非表示になっていた Marker を表示する

何てことないです。
たったこれだけで表示を切り替えることができます。

Marker オブジェクトの生成は、「住所から生成」とか「クリックした場所から生成」とか「緯度・経度を指定して生成」とか、いろいろあるのですが、共通して次のような感じに書くことができます。

var marker = new google.maps.Marker({map: gmap, position: location});
    // gmap → google.maps.Map オブジェクト
    // location → google.maps.LatLng オブジェクト

gmap が表す地図上に location が保持している緯度・経度の場所に Marker を立てる、といった具合です。

この辺りは、すでにこのブログでも取り扱いましたが、ちょっと整理したいと思っているので別の機会に取り上げます。

2. 動作確認

動くものは次の URL で公開しているので、実際に動かしてみたい方はご利用ください。

次はこのサイトのスクリーンショットです。
スカイツリーに Marker が付いています。

2014-04-05-2-01

このスカイツリーを中心に、東西南北の4つのエリアを区切って、Marker の表示・非表示を操作するボタンが地図の上にあります。

2014-04-05-2-02

試しに全エリアに1つずつ Marker を置いてみます。

2014-04-05-2-03

この状態で、「北東エリア」ボタンをクリックしてみると、このエリアに置かれている Marker だけが非表示になります。

2014-04-05-2-04

もう一度「北東エリア」ボタンをクリックすると、非表示になっていた Marker が表示されます。

2014-04-05-2-05

と、まぁ、こんな感じで操作することができます。

ソースコード

これまではソースコード全体をガバっと貼り付けてましたが、そろそろファイルが多くなってきたのでピンポイントで載せることにしました。

ソースコード全体を見たいという方は GitHub に登録してありますので、次から覗いてみてください。

この Marker の表示・非表示を操作している部分のソースコードはこんな感じです。
toggle 関数で操作しています。

/**
 * GoogleMaps 上に表示する Marker と、その Marker の InfoWindow を保持するクラス。
 * 
 */
var MarkderInfoWindow = (function() {

    /**
     * コンストラクタ関数。
     * 
     * @param  {Object} marker Marker オブジェクト
     * @param  {Object} location Maker の緯度・経度を格納したオブジェクト
     * @param  {Object} centerLocation GoogleMaps 上の中心点となる緯度・経度を格納したオブジェクト
     */
    var constructor = function(marker, location, centerLocation) {
        this.marker = marker;
        this.infoWindow = this.createInfoWindow(location);
        this.direction = LocationSort.judge(centerLocation, location);

        this.showInfoWindow();
    };

    constructor.prototype = {
        /**
         * InfoWindow を表示する。
         * 
         * @param  {Object} location Marker の緯度・経度を格納したオブジェクト
         * @return {Object}          InfoWindow オブジェクト
         */
        createInfoWindow: function(location) {
            var template = _.template($('#infowindow_template').text());
            var tag = template({
                latitude: location.k,
                longitude: location.A
            });
            return new google.maps.InfoWindow({
                content: tag
            });
        },
        /**
         * InfoWindow を表示する。
         * 
         */
        showInfoWindow: function() {
            this.infoWindow.open(this.marker.getMap(), this.marker);
        },
        /**
         * InfoWindow を非表示にする。
         * 
         */
        hideInfoWindow: function() {
            this.infoWindow.close();
        },
        /**
         * Marker と InfoWindow の表示を切り替える。
         * 
         * @param  {Object} toggleBoard 表示・非表示を判定するオブジェクト
         */
        toggle: function(toggleBoard) {
            if(toggleBoard.isHideDirection(this.direction)) { // この方角が非表示ならば
                this.marker.setVisible(false); // Marker を非表示にする
                this.hideInfoWindow(); // InfoWindow を非表示にする
            } else {
                this.marker.setVisible(true); // Marker を表示する
            }
        }
    };

    return constructor;
    
})();

4. まとめ

以上、GoogleMapsAPI を使って Marker の表示と非表示を切り替える方法でした。

ちょうど仕事で緯度・経度や地図を扱っているので、勉強用に設置した Google Map サンプル v0.7 が地味に役立っています。

あんな機能が欲しい、こんなことができたら便利みたいな感じに追加したい機能が増えてます。

2014-04-05-4-01

5. その他の GoogleMap に関する記事

その他の GoogleMap に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-where

jQuery を使ってファイルアップロードフォームのファイルが選択されているかを確認する方法

HTML に設置したファイルアップロードフォームにファイルが選択されているかを確認する方法を調べまし

記事を読む

icatch-browser_3376956889_mini-thumbnail

GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました

ウチのブログで公開している GoogleMaps API を使った GoogleMap のサンプルプ

記事を読む

icatch-googlemap_3384984991_mini-thumbnail

住所から GoogleMap を表示するサンプル

ここ直近の2プロジェクトで緯度・経度(もしくは住所)から GoogleMap を表示する要件がありま

記事を読む

icatch-class_303144538_mini-thumbnail

JavaScript のクラス定義

最近 JavaScript を使う機会が増えてきて、快適にコードが書けるように環境を少しずつ整えてき

記事を読む

icatch-checklist_4439276478_mini-thumbnail

BootstrapValidator の基本的なバリデーションを試すサンプルを作成しました

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapVali

記事を読む

icatch-pointer_7269926502_mini-thumbnail

GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル

これまで GoogleMaps API を使って Marker やら InfoWindow を表示す

記事を読む

icatch-bootstrap3

TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む

このところ立て続けに GoogleMap を JavaScript から扱う記事を投稿してます。 意

記事を読む

icatch-automatic_2714993937_mini-thumbnail

Grunt + QUnit + PhantomJS でテストを自動実行してくれる環境を構築する

先日投稿した GoogleMap サンプルのプロジェクトに Grunt の LiveReload を

記事を読む

icatch-template_mini

Underscore.js の template と each を使って JSON から select タグを生成する

Underscore.js を使って、都道府県名を定義してある JSON から select タグを

記事を読む

icatch-painting_mini

jQuery を使ってタグに設定されているクラスをすべて取り除いた後に指定のクラスに変更する

jQuery を使ってタグに設定されているすべてのクラスを取り除いた後に指定のクラスを設定する方法で

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


六 − 2 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑