Google Maps and Floatbox

Page: 1

Author Post
Member
Registered: Jan 2012
Posts: 98
Due to Google messing around with the Google Maps API, I have had to rewrite my maps pages. After much pain and ungentlemanly language, I have got it working, but it wouldn't display in a floatbox. I just got a big white space where the map should be.

The line of code, which has not changed, is
<a href="../maps/map_hotel.php?<?php echo "hid=".$hid ?>" class="floatbox locmap" data-fb-options="caption:`<?php echo $row_hotel['hotel'];?>` scrolling:no">See location map</a>

If I remove the "floatbox" class from the above, the map opens correctly directly in the browser window.

I have narrowed the problem down to the CSS styling in map_hotel.php. As I've no control of the height of the browser window I would like to specify map_canvas as height:100%.
<style>
html {height:100%}
body{height:100%;margin:0;padding:0}
#map_canvas {height:100%}
table.infowin, table.infowin tr, table.infowin td{margin:0;padding:0;border:0;background-color:#FFF;color:#666}
table.infowin td.pic{vertical-align:top}
td.pic img{margin-bottom:4px;border:none}
a{text-decoration:none}
.hotel{font-size:1.2em;font-weight:bold;color:#3498db}
.gm-style-iw{padding:6px;width:230px !important;border:1px solid #666;background-color:#fff}
</style>

After a huge amount of trial and error, I found a rather unsatisfactory fix by specifying the height of map_canvas in pixels. But that doesn't really work well across all devices.

I appreciate that this looks more like a CSS problem or a Google Maps problem, but it only occurs when the map is placed in a floatbox so I'm guessing that there is some conflict with something in Floatbox. I've peered at the fbOptions.js and floatbox.css but I can't see any issues. Is there someone cleverer than me who can spot the issue? I'm using Floatbox 7.51, by the way.
Administrator
Registered: Aug 2008
Posts: 3350
If there was a live example that I could poke at with developer tools I could give a much more useful answer.

A recommended first step would be to take Floatbox out of the picture and see if the problem remains. Build a small, simple page that contains nothing but a single iframe element with a src of the map content page. If the problem occurs there, solve it there before moving back to a Floatbox context.

If the problem occurs only when the page is shown in a floatbox, upgrade to the latest Floatbox release and try again. It may be solved, but if not, the latest release is the only one I can/will apply code changes to if necessary.

Use browser developer tools to inspect and experimentally modify styles and attributes of the map and its containers. Perhaps read up on canvas elements using 100% width or height and the relationship between their css width and height values and their attributes of the same names.

Most importantly, and probably the first thing to do, is to note that the google maps example on the 'Hi-Tech' tab of this site's demo page works just fine and has done so for many versions now. The source page code is viewable from that example, and perhaps the quickest route to success is to build your own starting with that example as a template page.
Member
Registered: Jan 2012
Posts: 98
Thanks admin. I had already done all the stuff with developer tools and basic pages. So I moved on to para 3. Without a great deal of hope I installed V.8.1.1 and tried a test page. It works!

So I copied over fbOptions.js and only needed the two extra lines for activateMedia and autoGallery. Tomorrow I'll have to change over everything to 8.1.1 but for the moment it's looking very positive.

Page: 1