The effect I'm looking for is that I have a div that is floating right with a Google map inside it and when the user scrolls down, I want it to be fixed at top:0px. This is basically what Yelp has for the map on their search page. There's been a few questions that are similar that ask about using JQuery to change the class of a div to fixed once the user scrollsdown but with Google Maps, I can't seem to get the effect to work.

The main reason is that Google Maps is using some sort of javascript that is loading after my own javascript that override the position to absolute and I can't change it through Jquery's css method or anything. So I've added a wrapper that is floating but adds a fixed class upon scrolldown. It fixes to the top of 0px fine but because it was floating, once the position become's fixed it jumps to the left and clobbers my other content.

I found a tutorial online, but it might be deprecated now? It wasn't working.

The effect I'm looking for is that I have a div that is floating right with a Google map inside it and when the user scrolls down, I want it to be fixed at top:0px. This is basically what Yelp has for the map on their search page. There's been a few questions that are similar that ask about using JQuery to change the class of a div to fixed once the user scrollsdown but with Google Maps, I can't seem to get the effect to work.

The main reason is that Google Maps is using some sort of javascript that is loading after my own javascript that override the position to absolute and I can't change it through Jquery's css method or anything. So I've added a wrapper that is floating but adds a fixed class upon scrolldown. It fixes to the top of 0px fine but because it was floating, once the position become's fixed it jumps to the left and clobbers my other content.

I found a tutorial online, but it might be deprecated now? It wasn't working.

• javascript
• jquery
• google-maps
• position

• Hard to help without seeing your code. Did you try using the CSS !important declaration? – squidbe Commented Jun 2, 2011 at 20:11
• At this point Google Maps fails. What would make sense is: I provide a rectangle on my GUI for GMaps to draw the landscapes into it, yet where and how this rectangle is positioned is none of GMaps business. It behaves so weird. position:absolute is working well, position:fixed fails. I would call that a bug. And yet 5 years later, it's still not fixed ... – Bitterblue Commented Jun 14, 2016 at 14:15

3 Answers 3

I had the same problem. All you have to do is create a DIV inside another. Like this:

<div id="outDIV" style="position:fixed; top:0">
  <div id="inDIV" style="width:100%; height:100%">
    [map content goes here]
  </div>
</div>

I know this is way old, but maybe someone else coming along can get some info out of this one.

Yes, you can add another element encasing the map element, but if you want to get around that you can set a listener for a tilesloaded event and then undo what google's done.

In api v3, you can do it like so:

google.maps.event.addListener(myMap, 'tilesloaded', function(){
    document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever';
});

I'm sure there are issues that go with setting a position to a map beyond what google likes, but if you want to keep the number of elements in your document to a minimum (you should really want to), this would be the way to do it.

(edit: adding quotes)

You just needed to pick apart the specifics of what Yelp was doing a little more, I think... their column is floated as well (examine their markup... it's #searchLayoutMapResults), but then inside that, the div #searchLayoutMapResults is the one that gets position: fixed added to it (via the className fixed), so it doesn't change the position of the floated column. So you probably just want an additional wrapper on the map, and add the fixed positioning to that instead of your floated container.

(the markup I found was based on this page)