web-dev-qa-db-fra.com

Google Maps ne centre pas parce que div est affiché: aucun au chargement de la page

J'ai une page Web qui contient un <div> caché à l'aide de display: none; et j'ai un bouton sur la page qui, une fois cliqué dessus, changera la visibilité du <div> et le superposera au-dessus de tout le reste (car il a un ensemble d'index z ).

Dans ce <div>, j'ai une carte Google intégrée à l'aide d'un iFrame avec l'épingle Google Map déposée à l'emplacement que j'essaie de montrer à mes utilisateurs.

Le problème

Étant donné que Google Maps iFrame se charge au chargement de la page et que le <div> est masqué, cela signifie que lorsque le <div> est affiché, la carte Google Map n'est pas alignée correctement (l'épingle et l'emplacement central se trouvent maintenant dans le coin supérieur gauche).

La solution que je cherche

Je sais que certaines personnes vont probablement me dire comment je "devrais" recoder ma page entière. Ce que je recherche en réalité, c’est une sorte de fonction onClick que je peux définir pour recharger l’iFrame afin que la carte soit correctement centrée.

Choses à savoir

Cette iframe a une page Google Maps en tant que src. c'est-à-dire une URL plutôt qu'un lien vers un fichier de mon site.

Toute aide serait grandement appréciée! Une grande partie du code que j'ai consulté lors de la recherche sur le réseau semble fonctionner pour actualiser un fichier spécifique qui est référencé plutôt qu'une URL externe. 

Cela fonctionnerait-il si j'intégrais la carte dans un autre fichier HTML, puis plaçais ce fichier HTML en tant que source d'image?

google-mapsiframe
27
William

J'ai eu ce problème similaire et résolu en changeant le style CSS de la div par jQuery, et en changeant l'endroit où je mets l'iframe de Google Map.

Le problème

Le code jQuery:

<script type="text/javascript">    
$(function(){  
        $("#map_link").click(function(event) {  
            event.preventDefault();  
            $("#map").slideToggle();
        });  
    });
</script>

Le HTML: J'avais le lien et l'iframe google map chargés en ligne dans une div avec un style d'affichage: none css. Parce qu'un style d'affichage: aucun rend la largeur de la division: 0 et la hauteur: 0, l'adresse demandée dans Google Map ne s'affiche pas correctement.

<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none">google_map_iframe_here</div>

La solution

Le code jQuery

<script type="text/javascript"> 
$(function() {
    $("#map_link").click(function(event) {  
        event.preventDefault();
        $("#map").slideToggle(); 
        $("#map").html('google_map_iframe_here').css('display','block');
        });  
});
</script>

Le code HTML: le div où je mettais la carte maintenant est vide, car je ne charge la carte que lorsque je clique sur le lien, et à ce moment-là, je change le style CSS de display: aucun à afficher: bloc, de sorte que la carte affiche bien.

<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none"></div>

J'espère que cela vous aidera! Passez une bonne journée de programmation!

16
Carolina

Je n'utilise pas d'iframe (j'utilise la version 3 de l'API Google Maps), mais le même problème "non aligné correctement" vient du fait d'un div "masqué". Mon correctif, au lieu d'utiliser display: none, qui l'a entièrement supprimé du DOM, j'ai utilisé la visibilité et la hauteur comme suit:

.myMapDiv {
    visibility: hidden;
    height: 0px;
}

Je pense que ce qui se passe, c’est que, parce que "visibilité: masqué" maintient en fait l’élément dans le DOM, la carte est restituée comme prévu. Je l'ai testé dans FF/Chrome/IE 7-9 et semble fonctionner jusqu'à présent sans problème.

7
Justin Lucente

Je ne suis pas un pro, mais j'ai supprimé onload = "initialize ()" de la balise body et l'ai modifiée en onclick = "initialize ()" dans le bouton qui permet d'afficher la div. Cela semble fonctionner maintenant. 

7
Forest

Vous pouvez simplement actualiser l'iframe comme ceci:

var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');
2
Pablo S G Pacheco

Après des heures de recherche sur Internet et n’ayant donné aucun résultat, j’ai décidé d’essayer ce que j’avais écrit comme note finale pour ma question et cela a fonctionné!

J'ai simplement créé un deuxième fichier appelé map.html et à l'intérieur du code se trouvait littéralement:

<html>
<iframe> </iframe>   
</html>

avec évidemment le code source Google Maps, puis dans ma page principale, j’avais la src pour l’iframe liée à pages/map.html au lieu du lien Google Map.

2
William
<script type="text/javascript">
$(document).ready(function (){$("#showMap").slideUp();})
</script>
<script type="text/javascript">
function showMap()
{
$("#showMap").slideToggle();
}
</script>
<a href="#mapa" onClick="showMap();">Show / Hide Map</a>
<div id="showMap" style="margin-left:15px; width:615px; height:400px;">
<?php require_once "map.php";?>
</div>
1
Shahid Mir

J'ai eu le même problème, ma solution a été de régler à la fois la div & the iframe sur 0px height et ensuite de la changer à la hauteur souhaitée lors du basculement.

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var ifr = document.getElementById("iframe");
    var text = document.getElementById("displayText");
    if(ele.style.visibility == "visible") {
            ele.style.visibility = "hidden";
        ele.style.height = "0px";
        ifr.style.height = "0px";
        text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
    }
    else {
        ele.style.visibility = "visible";
        ele.style.height = "420px";
        ifr.style.height = "420px";
        text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
    }
} 
</script>

<div id="mb">
<a id="displayText" href="javascript:toggle();"><img src="#" border="0" width='180' height='65'></a>
</div>


<div id="toggleText"  style="visibility: hidden; height: 0px;">
<p><iframe id="iframe" style="height: 0px;" src=#" width="650">
</iframe></div>
1
Akerz

au lieu de cacher la div avec display:none, utilisez quelque chose comme position: absolute; top: -9999px; left: -9999px

puis, lorsque vous souhaitez afficher le contenu de cette div, définissez ces propriétés sur position: static; top: auto; left: auto ou quelque chose du genre

1
felipelavinz

Il existe une solution utilisant à la fois css et jQuery. Tout d’abord, vous avez besoin d’un div de wrapper sans hauteur qui inclura l’iframe.

De cette façon, l’iframe se chargera normalement sans être visible du tout. Suivant l’utilisation de jQuery, vous pouvez afficher/masquer l’iframe.

HTML

<div id="map-show">Show Map</div>
<div id="map-hide">Hide Map</div>

<div id="map-wrapper" style="height:0; overflow:hidden;">
    <div id="gmap">
        <iframe width="850" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="xxx"></iframe>
    </div>
</div>

CSS

.hidden {
    display: none;
}

jQuery

$(document).ready(function() {

$('#map-show').on('click',function(){

    // Remove class hidden from map - Display map
    $('#gmap').removeClass('hidden');

    // Set height to map container div - ONLY one time needed
    $('#map-wrapper').css('height', 'auto');
});

$('#map-hide').on('click',function(){

    // Add class hidden to map - Hide map
    $('#gmap').addClass('hidden');

});

});

1
mponiek

J'ai rencontré le même problème.

Solution

Utiliser iframe comme source externe fonctionne.

démo en ligne

http://jsbin.com/nogomi/1

Assurez-vous que l'attribut iframe de name element est identique à l'attribut a de target element

Inspiré de https://developers.google.com/maps/documentation/javascript/

0
medifle

Voici une solution qui ne nécessite aucune programmation! 

Lorsque vous obtenez le code intégré, cliquez sur "personnaliser et prévisualiser la carte intégrée", puis faites simplement glisser la carte vers le bas et vers la droite de sorte que la punaise se trouve dans le coin inférieur droit, puis récupérez le nouveau code intégré.

Lorsque la carte est au centre en mode masqué, elle sera toujours affichée correctement une fois développée. (pas parfait, je sais, mais si tout ce que vous voulez, c'est que la punaise à afficher sur la carte fonctionne totalement)

0
Richard Varno

Vous pouvez utiliser la visibilité masquée et utiliser jQuery pour l'afficher et la masquer.

$('click-button').click(function(){
    var visibility = $("hidden-div").css("visibility");

    if (visibility == "hidden")
      $("hidden-div").css("visibility","visible");
    else
      $("hidden-div").css("visibility","hidden");
  });
0
manosagent

Même problème, solution facile.

les css cachés laissent une place dans le flux html. Je ne sais pas si une position CSS en dehors de l'écran est bien acceptée sur tous les appareils et obtient un bloc parfaitement caché. .

css:

#map    {overflow:hidden; float:left;}

html:

<a href="#" id="btn_show">show</a>
<a href="#" id="btn_hide">hide</a>
<div id="map">
  <iframe width="100%" src="http://maps.google.com/maps f=q&source=s_q&hl=en&geocode=&ie=UTF8&iwloc=A&output=embed ...>
</div>

javascript:

var w=sames as gmap width;
var h=sames as gmap height;

$(document).ready(function(){
  $("#map").width(0);
  $("#map").height(0);

  $("#btn_show").click(function(){
    $("#map").show();
    $("#map").width(w);
    $("#map").height(h);
  });
  $("#btn_hide").click(function(){
    $("#map").hide();
  });
})
0
skyrail

J'ai eu du mal avec quelque chose comme ça aussi. Où j'ai initialement ajouté une classe .hidden qui est display: none;. Mais lorsque je bascule .hidden, la carte n'est pas centrée. J'ai constaté qu'attendre le chargement complet de la carte en utilisant l'écouteur d'événements idle avant d'ajouter la classe .hidden résolvait tous mes problèmes d'affichage.

google.maps.event.addListenerOnce(map, 'idle', function(){ // do something only the first time the map is loaded $mapContainer.addClass('hidden'); });

référence: Comment puis-je vérifier si Google Maps est entièrement chargé?

0
Matt Goo