14440


Airbnbや食べログのように  
<https://www.airbnb.jp/s/%E4%BA%AC%E9%83%BD--%E6%97%A5%E6%9C%AC>  
<http://tabelog.com/en/tokyo/A1301/A130101/rstLst/>

地図と一覧の表示をリンクさせて、一覧リストをhoverで格闘するマーカーの位置へ画面移動等はどのようにしているのでしょうか？  
マーカー一覧をマップに表示する所までは問題なくできたのですが、その後の画面移動をどのように実装していけば良いのか分からずに居ます。

どなたか似たような実装経験がおありの方、ご教授いただけれればと思います。  
宜しくお願いいたします。


CC BY-SA 3.0
2015-08-15T07:08:37.257
14439
2015-08-15T09:36:44.433
8500
question
javascript google-maps
google map api を使ったロケーション一覧表示方法


食べログのソースを読みましたが、そんなに特別な処理はしていません。  
下のようなマーカーオブジェクトの作成が肝でしょうか。

[code]

        var markerObject = {
          id: $info.attr('data-id'),
          marker: marker,
          info: infowindow,
          iconType: iconType,
          vacancy: vacancy,
          isOpen: false,
          infoOpen: function(){
            this.isOpen = true;
            this.marker.setIcon(activeIcons[this.iconType][this.vacancy]);
            this.info.open(map, this.marker);
          },
          infoClose: function(){
            this.isOpen = false;
            this.marker.setIcon(icons[this.iconType][this.vacancy]);
            this.info.close();
          }
        };
    
[/code]

こういうオブジェクトさえ作ってしまえば、左のリストへのホバーイベントに応じて対応するオブジェクトの`infoOpen()`メソッドを呼ぶだけです。  
地図上でドラッグ移動した時の動きについては、`dragend`イベント時に現在位置を取得し、それを元にajaxリクエストで画面内に収まるマーカーを取得・再描画しています。  
ちょっとご質問の範囲が広いと思いましたので、この辺りの処理についてはより具体的な質問を別で立てられるのが良いと思います。


CC BY-SA 3.0
2015-08-15T08:36:17.280
14440
2015-08-15T09:36:44.433
2015-08-15T09:36:44.433
8532
8532
14439
answer