Question

I really like how Gables.com has created their custom Google Map InfoWindows and Markers here:

http://gables.com/find/where?utf8=%E2%9C%93&floorplans=any&group=&query=75254&beds=&baths=&rent_min=&rent_max=&pet_friendly=

What I like in particular about Gables implementation of the InfoWindow and Map Marker as one piece is:

It combines the map marker and the infopane window essentially, making it almost as one piece: When you click on the map marker with the thumbnail, the map marker expands, the thumbnail image gets larger, and a side panel pops out as the info pane window, where your information can go, and you can click the minus sign, and it collapses the window back to the thumbnail marker. The only change that I would like to add to this if I could would be when you click on another marker, the currently open infopane automatically closes.

Anyone know how Gables.com is accomplishing their InfoWindow-like implementation on Google Maps API v3, and if at all possible to acomplish this, make it when you click another marker, the current one collapses automatically? Thank you in advance.

-Bruce

Answer 1

Take a look at their source code: http://gables.com/javascripts/map.js, they are using OverlayView: https://developers.google.com/maps/documentation/javascript/reference#OverlayView.