I have a site with a fixed navigation bar that should scroll with the page. When I add a JS Google Map, the nav bar no longer moves:

.html

Also, the problem only occurs when the map is absolutely positioned.

I have a site with a fixed navigation bar that should scroll with the page. When I add a JS Google Map, the nav bar no longer moves:

http://amosjackson./map/index.html

Also, the problem only occurs when the map is absolutely positioned.

• javascript
• css
• google-maps

• This is both a browser related issue (it works well with Chrome but not on FF), and also has something to do with the z-index. Giving a negative z-index less than "-1" as you did to the map should fix the issue. – Daniele B Commented May 3, 2013 at 18:50
• @DanieleB it works when I give the map a positive z-index but now I can't get the text to go on top. – Amja Commented May 3, 2013 at 19:10
• adding an z-index to the text element greater than the one of the map could work... – Daniele B Commented May 3, 2013 at 22:33

3 Answers 3

Add translateZ to the fixed element

-webkit-transform: translateZ(0);

I found out while analysing the whole google map canvas. The API adds also a -webkit-transform: translateZ(0) to the map. this breaks many browsers in painting the fixed elements correctly.

In addition the fixed element could also need other related visibility properties like z-index and opacity.

A working solution: (I always put my map canvas into a container)

.my-fixed-elem {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 500 // adapt for your project
  opacity: 1 // some times you can remove this
}

.map-canvas-container {
    width: 100%; // somewidth
    height: 750px; // someheight
    position: relative;
    z-index: 18;
    top: 0;
    left: 0;
}

#map-canvas-contact {
    width: 100%;
    height: 100%;
}

Best regards

remove the z-index from the google maps div and also give it an opacity value such that the text bees visible.. play around with them..

hope that helps..

It is some sort of webkit bug related to the "transform" css setting that is added to the outer maps element. The transform:translateZ(0px) is added in a style attribute, but does not need to be in there, removing it has no effect.

So the answer is to add a css line to the page and use the !important flag so it will override the style attribute's setting.

<style>
#map-canvas[style] { -webkit-transform:none !important; }
</style>

Note, the [style] part makes it only take effect if google adds the style attribute, and the #map-canvas may need to be changed to match the element you sent to google.maps.Map()