Recently I had to build a ‘smart booking form’ for a group of hotels. The website is made on Twitter’s Bootstrap and is fully responsive.
Troubles began when I had to ask the guest for his children’s age, only if he’s telling the form he has children.
Here the Twitter Popover feature comes very handy: if the guest selects one or more children a popover will be shown.
If you’re working on a website which needs a map wrapped in a really low element, you’ll probably have some issue with the Google Maps balloon position over a pinpoint.
It will be cut by the top border: if you open it by clicking on the pinpoint the map scrolls down, but if you let the popup open on page loaded it will be cut out by the map limit.
This is because the library doesn’t know how high the pinpoint image will be when the event containing ‘infowindow.open()’ is fired.
Here’s a reference screenshot of the Google Maps popup positioning error I’m talking about:
The solution is pretty easy: you can workaround this issue by opening the balloon when the gmaps library fires the ‘tilesloaded‘ event.
At this time the pinpoint image is fully loaded and the library can make the map scroll as far as needed to the balloon to be showed.
Continue reading →