HTML Div’s layered onto Google Streetview: Chrome issue

While working on Daft‘s Map Search facility, we naturally decided to integrate Google’s Street View (SV) as a feature, especially since we were one of the launch partners for the product in Ireland. We decided to do this as follows:

For each property icon on the map, when you click on it, bring up a small info window with a picture, minimal details, a link to the property’s main page and, where applicable a link to the SV image for that property
When clicking on the SV link, the entire map is replaced with the SV window
A button would then exist to close the SV window and revert back to the map

When you use SV on Google Maps, there’s a small ‘x’ icon on the top right to close the window and revert to the map. This icon unfortunately doesn’t exist when you use SV on your own site, so I had to come up with something else to close the window. I decided to overlay a HTML div on the window, fill it with a ‘close’ image and use a JavaScript mouse-click event handler to detect when the icon was clicked and thus close the SV window and re-show the map.

Creating the overlay div, populating it with a red ‘x’ icon that we’ve used for close buttons elsewhere in the site, getting this icon to show on the top right of the SV window, coding the mouse-click handler and closing SV/re-displaying the map was fairly straightforward in all browsers, until I got to Chrome and IE6. The div simply would not display on top of the SV window. When you clicked a property’s SV link, the map would hide, you’d see the red ‘x’ icon for a split second, then SV would be loaded on top of it. No matter what I tried in CSS, JavaScript or HTML I simply could not get it to work, until I found out about something called the ‘IFRAME shim‘.

What the IFRAME shim technique does is that it places simple <iframe></iframe> tags, absolutely positioned, between the SV panel and your overlay div. Simple, yes; to come up with this on your own, no! Luckily after loads of googling, I found this link and along with the one above, I was able to solve the problem in literally a matter of minutes!

Here is a quick sample of it working, with a basic div overlayed onto the SV panel:

Hello

Now for the code. Let’s start with the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

#pano_container {
width: 500px;
height: 300px;
position: relative;
margin: auto;
}
#pano {
width: 500px;
height: 300px;
z-index: 0;
}
#pano_container iframe {
width: 100px;
height: 36px;
z-index: 1;
position: absolute;
top: 132px;
left: 200px;
}
#overlay {
width: 100px;
height: 36px;
position: absolute;
z-index: 2;
top: 132px;
left: 200px;
text-align: center;
color: #000;
background: #fff;
line-height: 36px;
}

So the #pano iframe and #overlay elements are related to each other. The iframe is coming between the SV pane and the HTML overlay, as mentioned above. You’ll notice that the width, height, position, top and left values are indetical, while the iframe has a lower z-index.

Next, the HTML. I only need to display the iframe if we’re dealing with Chrome or IE6, hence have put a PHP check in there. However, the example used above does use the iframe tag, just to show it can be used in all browsers. #pano is the actual div that Google loads SV into. #pano_container just wraps the whole thing up into one div, but the position: relative; is important as it enables the position: absolute; on #pano iframe and #overlay to work as we want them to.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="pano_container">
<div id="pano"></div>
<?php
if (
stripos($_SERVER['HTTP_USER_AGENT'], 'chrome') !== FALSE ||
strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.0') !== FALSE
)
{
?>
<iframe></iframe>
<?php
}
?>
<div id="overlay">Hello</div>
</div>

Hopefully this will clear things up for people wondering why their HTML overlays on Google Street View aren’t appearing in certain browsers. Cross-browser compatibility can be one of the most frustrating things as a web developer, but it’s also one of the most important.

HTML Div’s layered onto Google Streetview: Chrome issue

No Comments

Leave a reply