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