Why is Google Maps overridding my div tag

Question

I created a div tag called "map-canvas" where google maps is residing. In my style sheet I have set the position to fixed, but when I open the browser and inspect I see google maps has overriden my style with its own and changed position fixed to position: relative. Why? How can I override google from doing this? I tried putting style attributes right in the tag but google still overrode these values.

before

#map-canvas {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 40%;
height: 900px;
background-color: pink;
/* border: 3px solid black; */
}

after

element.style {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0px);
background-color: rgb(229, 227, 223);
}

possible duplicate of [Google Maps: Relative to Fixed Positioning](http://stackoverflow.com/questions/6219709/google-maps-relative-to-fixed-positioning) — Anto Jurković, Jun 06 '14 at 22:16

score 1 · Accepted Answer · answered Jun 06 '14 at 22:14

When you call new google.maps.Map(element) Google will do whatever it wants to that element. Instead attach the google maps to an element within your styled element:

css:

#map-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 40%;
height: 900px;
background-color: pink;
/* border: 3px solid black; */
}

html:

<div id="map-container">
  <div id="map-canvas">
  </div>
</div>

Why is Google Maps overridding my div tag

1 Answers1