Geek asks and answers

Google Maps: relative to fixed positioning

The effect I'm looking for is that I have a div that floats right with the google map inside it, and when the user scrolls down, I want it to be fixed from above: 0px. This is basically what Yelp has for the map on its search page. There were a few questions similar to the question of how to use jQuery to change a div class to a fixed one after scrolling the user, but using Google Maps, I can’t get the effect to work.

The main reason is because Google Maps uses some kind of javascript that loads after my own javascript, which redefines the position to an absolute value, and I cannot change it using the jquery css method or something else. So I added a wrapper that floats but adds a fixed class to scrolldown. It fixes the 0px vertex in order, but since it was floating, as soon as the position is fixed, it jumps to the left and bends other content.

I found the tutorial online, but now it may be outdated? He did not work.

+3
source share
3 answers

, Yelp, ... ( ... it #searchLayoutMapResults), div #searchLayoutMapResults - , position: fixed ( className fixed), . , , , .

( )

+2

. , , DIV . :

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

I know this is old fashioned, but maybe someone else can get some information from this.

Yes, you can add another element that exchanges the map element, but if you want to get around this, you can set a listener for the markup event, and then cancel the google action.

In api v3 you can do it like this:

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

I am sure that there are problems associated with setting the position on the map, different from what Google likes, but if you want the number of elements in the document to be minimal (you really need), this will be the way to do it.

(edit: add quotes)

+6
source

More articles:


All Articles