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.