Google Maps: par rapport à la correction du Positionnement

L'effet, je suis à la recherche d', c'est que j'ai un div qui est flottant à droite avec une carte Google map à l'intérieur et lorsque l'utilisateur fait défiler vers le bas, je veux qu'il soit fixé au top:0px. C'est essentiellement ce que Yelp a la carte à partir de leur page de recherche. Il y a eu quelques questions similaires qui portent sur l'utilisation de JQuery pour changer la classe d'un div pour fixe une fois que l'utilisateur scrollsdown mais avec Google Maps, je n'arrive pas à obtenir l'effet de travailler.

La raison principale est que Google Maps est à l'aide de javascript qui est en cours de chargement après mes propres javascript qui remplacent la position à l'absolu et je ne peux pas le modifier via Jquery css méthode ou quoi que ce soit. J'ai donc ajouté un wrapper qui est flottant mais ajoute un fixe de classe à déroulant. Il se fixe sur le haut de 0px bien, mais parce qu'il a été flottant, une fois la position deviennent fixes, il saute vers la gauche et clobbers mon autre contenu.

J'ai trouvé un tutoriel en ligne, mais il pourrait être obsolète maintenant? Il ne fonctionnait pas.

Difficile d'aider sans voir votre code. Avez-vous essayez d'utiliser le CSS !importante déclaration?
À ce point, Google Maps échoue. Ce qui ferait sens est: je donne un rectangle sur mon interface graphique pour GMaps pour dessiner les paysages, mais où et comment ce rectangle est positionné en est pas de GMaps d'affaires. Il se comporte de manière bizarre. position:absolute fonctionne bien, position:fixed échoue. Je dirais que d'un bug. Et pourtant, 5 ans plus tard, il n'est pas encore fixé ...

OriginalL'auteur Emsu | 2011-06-02

  1. 2

    Vous avez juste besoin de faire ressortir les spécificités de ce que Yelp a été faire un peu plus, je pense que... de leur colonne est flottant (examiner leur balisage... c'est #searchLayoutMapResults), mais à l'intérieur, la div #searchLayoutMapResults est celui qui obtient position: fixed ajoutée (via la classe fixed), afin de ne pas modifier la position de la flottait colonne. Donc, vous voulez probablement seulement un supplément de wrapper sur la carte, et ajouter la correction du positionnement à la place de votre flottait conteneur.

    (le balisage j'ai trouvé était basé sur cette page)

    #mapcontainer aussi change de classe "inférieure" une fois que l'utilisateur fait défiler vers le bas assez loin pour #searchLayoutMapResults avoir moins de hauteur visible de la #mapcontainer hauteur.

    OriginalL'auteur RwwL

  2. 10

    J'ai eu le même problème. Tout ce que vous avez à faire est de créer un DIV à l'intérieur de l'autre.
    Comme ceci:

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

    OriginalL'auteur RASG

  3. 6

    Je sais que c'est vieux, mais peut-être que quelqu'un d'autre à venir le long pouvez obtenir des informations de celui-ci.

    Oui, vous pouvez ajouter un autre élément recouvrant l'élément de la carte, mais si vous voulez obtenir autour de ce que vous pouvez définir un écouteur pour un tilesloaded événement, puis défaire ce que google fait.

    Dans l'api v3, vous pouvez le faire comme ceci:

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

    Je suis sûr qu'il y a des questions qui vont avec réglage de la position d'une carte au-delà de ce que google aime bien, mais si vous voulez garder le nombre d'éléments dans votre document à un minimum (vous devriez vraiment envie), ce serait le moyen de le faire.

    (edit: ajout de guillemets)

    Ne fonctionne plus sur mon côté, même chose pour vous ?

    OriginalL'auteur borbulon