質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.78%

  • JavaScript

    9554questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Javascriptで変数の数を取得し、繰り返しに反映させたい

解決済

回答 2

投稿 2016/02/21 22:10 ・編集 2016/02/22 00:28

  • 評価
  • クリップ 0
  • VIEW 535

Motsu

score 8

以下のサンプルスクリプトにおいて、店舗の数を自動取得した上で、
for等の繰り返しを使って「●●」に1~Nの数値を代入したいと考えています。
記述方法について、アドバイスをいただければ幸いです。

// N個の店舗を任意に記述
var shop1 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, icon: 'images/icon1.png', title: '場所1' });
var shop2 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, icon: 'images/icon2.png', title: '場所2' });

// 店舗情報を元に「shop●●」を自動出力
var contentString = shop●●.title;
var infowindow●● = new google.maps.InfoWindow({ content: contentString });
google.maps.event.addListener(shop●●, 'click', function() { infowindow●●.open(map,shop●●); });

[参考]
イメージとしては、以下と同等の機能が満たせれば、という意図です。

var contentString = shop1.title;
var infowindow1 = new google.maps.InfoWindow({ content: contentString });
google.maps.event.addListener(shop1, 'click', function() { infowindow1.open(map,shop1); });

var contentString = shop2.title;
var infowindow2 = new google.maps.InfoWindow({ content: contentString });
google.maps.event.addListener(shop2, 'click', function() { infowindow2.open(map,shop2); });

    ・
    ・
    ・

var contentString = shopN.title;
var infowindowN = new google.maps.InfoWindow({ content: contentString });
google.maps.event.addListener(shopN, 'click', function() { infowindowN.open(map,shopN); });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

for文で繰り返させるより、設定を渡したらイベントを関連付けてくれる所までの一式を関数化したほうが良いと思います。

// 定義
var createShopMarker = function(option) {
  this.shop = new google.maps.Marker(option);
  this.init();
};

createShopMarker.prototype = {
  init: function() {
    this.title = this.shop.title;
    this.map = this.shop.map;
    this.infoWindow = new google.maps.InfoWindow({
      content: this.title
    });
    this.bindEvent();
  },
  bindEvent: function() {
    var _self = this;

    google.maps.event.addListener(this.shop, 'click', function() {
      _self.openInfo();
    });
  },
  openInfo: function(){
    this.infoWindow.open(this.map, this.shop);
  }
};

// 実行
var shop1 = new createShopMarker({
  position: new google.maps.LatLng(座標),
  map: map,
  icon: 'images/icon1.png',
  title: '場所1'
});

var shop2 = new createShopMarker({
  position: new google.maps.LatLng(座標),
  map: map,
  icon: 'images/icon2.png',
  title: '場所2'
});

投稿 2016/02/22 14:13

編集 2016/02/22 16:17

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2016/02/22 14:38

    おお!!アドバイスありがとうございます。
    テストしたところ、こちらでも正しく動作しました!

    一式を関数化するこのパターンはとてもシンプルで良いですね!
    for文で回す方法とこの方法、処理的にどのような違いがあるのでしょうか。

    最終的な挙動は同じでも、方法によってメリットデメリットがあるならば、
    今後の勉強のために伺えれば幸いです。

    キャンセル

  • 2016/02/22 15:00 編集

    ある関数に設定を渡したら、必要なイベントの関連付け等を自動で行ってくれる形です。
    こちらの場合、もしfor文で繰り返させるとしても定義内の処理ではなく、実行部分について、繰り返させる形になると思います。

    新しい情報を追加する場合も new createShopMarker({設定}); という一文を追加という形になります。
    下記がメリットだと思っています。

    - 新規追加が簡単になる。
    - ループ処理をする上でのiの状態を考えなくて良い。
    - 渡した設定とイベントが1:1で結びつく
    - イベントを追加する場合は、定義部分にイベントを追加すれば良い。

    ここからさらに発展して、より処理をまとめようとする場合にも、
    書き直しやすいと思います。

    キャンセル

  • 2016/02/22 15:47

    記述がシンプルになることで、メンテナンスの利便性が上がるわけですね。
    大変勉強になりました。

    今回はこちらの方法で行こうと思いますので、迅速にご解答いただいた fagai さんに感謝の意を示しつつも、 yamato_hikawa さんの回答をベストアンサーとさせていただければと思います。

    yamato_hikawa さん、fagai さん、ありがとうございました。

    キャンセル

+1

shop1,shop2のような変数名にする必要がなければ以下の様な対応方法があると思います。

var shops = [];

shops.push(new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, icon: 'images/icon1.png', title: '場所1' }));
shops.push(new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, icon: 'images/icon1.png', title: '場所2' }));
// 省略...


var contentString;
var infowindow;
for(var i = 0; i < shops.length; i++) {
    contentString = shops[i].title;
    infowindow = new google.maps.InfoWindow({ content: contentString });
    google.maps.event.addListener(shops[i], 'click', function() { infowindow.open(map,shops[i]); });
}

このように配列にすることで、複数のshopが増えても対応できると思います。

追記
もしかしたら修正部分は以下の形式でも行けるかもです。

for(var i = 0; i < shops.length; i++) {
    (function(){
        var contentString = shops[i].title;
        var infowindow = new google.maps.InfoWindow({ content: contentString });
        google.maps.event.addListener(shops[i], 'click', function() { infowindow.open(map,shops[i]); });
    })();
}

投稿 2016/02/21 22:29

編集 2016/02/22 00:59

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2016/02/21 23:54 編集

    まさにこの方向性のやり方についてお教えいただきたかったところです!
    こちらの理想に近い形のご提案、ありがとうございます。

    ただ、これを組み込んだところ、1行目に対し以下のエラーが出てしまいました。
    最初に空の配列を作ったところまでは理解できましたが、その後の処理は
    どう扱えば良いのでしょうか。

    不勉強で申し訳ありませんが、アドバイスいただけると幸いです。

    Unexpected token ']'

    キャンセル

  • 2016/02/22 00:09

    すみません!修正しました。
    shops[]の部分をshops.push(内容)に変更しました

    キャンセル

  • 2016/02/22 00:34

    pushで追加していくわけですね。大変勉強になります。

    ただ、すみません!こちらのミスで質問に記述ミスが入っており、
    そこがネックでお教えいただいた部分を多少書き換えなければならなそうです。

    具体的には「infowindow」にもshopsに対応する数字を入れる必要があるようで、
    その点について質問を編集させていただきました。

    度々申し訳ありませんが、ご教授いただけると幸いです。

    キャンセル

  • 2016/02/22 01:06 編集

    あー、varで指定しているから複数定義できないエラーですね。こちらの記述ミスです。
    標準のjsだとforのブロックスコープは適用されないので確かにエラーになりますね。

    一応なぜエラーなのかなのですが、
    var aaa = 1;
    var aaa = 2;
    のようにvarでaaa変数を2回以上定義することは出来ないのです。。。
    スコープと呼ばれる範囲で区切ってやれば分けることができるのですが、javascriptの場合はそれがほぼ無いので先ほどの処理ではエラーになっていました。。。

    キャンセル

  • 2016/02/22 00:58 編集

    修正しました。
    もし、infowindowを入れた後に触るのであれば、infowindowも配列にして管理すれば良いと思います。

    キャンセル

  • 2016/02/22 09:49

    infowindowを配列として処理したところ、上手く動作しました。
    fagaiさん、ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.78%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    9554questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

閲覧数の多いJavaScriptの質問