0

I'm trying to work out why the StreetView controls don't appear in Chrome browser when StreetView is opened programmatically but they do appear when StreetView is displayed by using the pegman...

Here's the map: http://beta.findtoilet.dk/?term=2&lat=55.678937&lng=12.575738&zoom=15&maptype=roadmap

Drag pegman to show StreetView and it works perfectly. You can see the top-right close button, the zoom and compass controls and the bottom left and right Google links.

Now open the infowindow by clicking a marker or a sidebar item. The infowindow contains a link to open StreetView for that marker - give that link a click. StreetView displays but none of the controls are visible, neither are the two bottom Google links. Yet if you hover the mouse where the controls would be displayed the mouse click works just as if the controls were visible. If you hover the mouse top right until it turns into apointing hand and click where the zoom control would be, the StreetView will zoom in or out and while zooming you can see all of the invisible controls.

Everything works fine with Firefox and IE9. I'm using the latest versions of all browsers on a 64 bit Windows 7 pc, another person has reported the same problem on 32 bit Windows XP.

I've tried to use the Chrome developer tools but see nothing that would cause the controls to not be visible.

This usedto work fine in Chrome so i'm not sure if the problem is related to a Chrome update or a change in the Google Maps API - no changes have been made to the map javascript recently.

Can anyone suggest what might be wrong?

Thanks.

Martin.

Martin Pearman
  • 592
  • 5
  • 5

1 Answers1

0

The problem seems to be with -webkit-transform:scale(1) that you apply to the #toiletMap div[style].

Removing this, it fixes the problem..

alternatively, you can add translateZ(0) to fix the problem.

-webkit-transform:scale(1) translateZ(0);

Update

It must be related to

Community
  • 1
  • 1
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • That definitely seems to be the problem. Unfortunately it's a style applied by the Google Maps API so not easy to fix. Anything i add to the web page styles as an attempt to fix it get's overridden by the Google Maps API styles... – Martin Pearman Oct 05 '12 at 06:32
  • Normally a rule like `html body #toiletMap div[style]{-webkit-transform:scale(1) translateZ(0);}` should override the one from google maps..(*since it has higher specificity*) – Gabriele Petrioli Oct 05 '12 at 07:45
  • Great it's fixed: html body #toiletMap div[style]{ -webkit-transform:scale(1) translateZ(0) !important; } Needed !important added as Google's stye also used !important - without this my fixed style was not applied. Thanks a lot. – Martin Pearman Oct 06 '12 at 10:08
  • Posted my reply too soon, a check soon shows that map is now unable to be dragged or zoomed. I'll have to start an issue on the Google Maps API issues page i think. – Martin Pearman Oct 06 '12 at 10:13