Edit the UX for results map view, using infoBox.js.

[ghost]

In this branch, I made some UX changes to the results map view in response to Issue #365 ("Google Map rollover is cropped out of view some times."). I tried using infoBox.js from the Google Maps utility library, because it allows for easy customizability, including position and styling. Presently, the infoBox is displayed to the right of markers to decrease the likelihood of it being cropped out of the window. The infoBox can be styled either within its options object, or by linking to a CSS stylesheet. Some issues that I encountered along the way included the following:

(1) I had to set the marker's optimized property to false in order to prevent events from propagating through the infoBox onto the map (e.g. to prevent markers underneath an open infoBox from registering a mouseover event).

(2) I had to add a line to infoBox.js (line 274) to increase the z-index of the close box [x], because it was visible but not clickable. This doesn't seem to be a bug in infoBox in general, so I'm thinking it was conflicting with something else on the Ohana page.

(3) infoBox.js requires the google maps api to be fully loaded before it is loaded. This has presented some difficulties because of the asynchronous loading of the google maps api. I changed require.js shim to handle the fact that infoBox depends on google maps api. Unfortunately this problem is still not fully resolved. Presently, it works fine about 50% of the time, and the other 50% of the time it throws an error on page load, saying that infoBox could not find the google maps api.

[anselmbradford]

@millereric Thanks for your contribution!