list view similar to google hotels in angular

Hi,

https://plnkr.co/edit/GT3Ui25usbOFDGw7?preview

I am trying to implement list view in my sandbox
This coordinate {pos:[36.77, -119.41]} should appear in the list view only when I zoom out and see the marker in map.
This coordinate {pos:[36.77, -119.41]} should disappear from list view when I zoom in.
This coordinate {pos:[36.77, -119.41]} should appear only when I drag the map on the left side untill I see the marker.
Similar Effect should happen for all the markers. You can test for spain coordinate too.
I am trying to build a prototype similar to google hotels.
In list view only the markers should come which we see in google maps
Can you update in the sandbox link below
when I zoom into Africa other markers should disappear
when I click on the each coordinate it showed move that particular marker on the map

https://www.google.com/travel/hotels/Irving?g2lb=2502548%2C2503780%2C2503839%2C4258168%2C4270442%2C4306835%2C4317915%2C4328159%2C4371335%2C4401769%2C4419364%2C4463666%2C4472151%2C4482438%2C4486153%2C4488304%2C4491350%2C4523593%2C4270859%2C4284970%2C4291517&hl=en-US&gl=us&ssta=1&ap=KigKEgkRs7PTpmhAQBEBJSqtd2BYwBISCYhILaHbf0BAEQElKq0vTljAMAJawQIKBQiWARAAIgNVU0QqFgoHCOUPEAMYGhIHCOUPEAMYGxgBKACwAQBYAWgBigEoChIJEXX6AeloQEARUld6qJ9cWMASEgmejMusHYBAQBFSV3qoV0pYwJoBCBIGSXJ2aW5nogESCggvbS8wX193bRIGSXJ2aW5nqgEHCgMI8AEYAKoBEgoCCBQSAggbEgIIUhICCBcYAaoBBwoDCJwBGACqARsKAggcEgIIcxICCEcSAggkEgIITRIDCJ4CGAGqAQoKAgglEgIIeRgBqgEWCgIIERICCH0SAghAEgIIOBICCCsYAaoBGgoCCC4SAghWEgIIOhICCD0SAghLEgIIUxgBqgEGCgIILBgAqgEKCgIIUBICCEwYAaoBBgoCCAQYAKoBGgoCCDUSAggTEgIICxICCDESAghdEgIIEBgBkgECIAFoAHABgAEB&q=hotels%20near%20me&rp=ogEYVmFsbGV5IFJhbmNoLCBJcnZpbmcsIFRYOAFAAEgC&ictx=1&sa=X&utm_campaign=sharing&utm_medium=link&utm_source=htls&ts=CAESABpSCjQSCDoGSXJ2aW5nGigKEgkRs7PTpmhAQBEBJSqtd2BYwBISCYhILaHbf0BAEQElKq0vTljAEhoSFAoHCOUPEAMYGhIHCOUPEAMYGxgBMgIQACoPCgsoAUoCIAE6A1VTRBoA&ved=0CAAQ5JsGahcKEwiIucvYhc_vAhUAAAAAHQAAAAAQIQ